Reactjs: передать функциональный компонент другому функциональному компоненту - PullRequest
Новая
       4

Reactjs: передать функциональный компонент другому функциональному компоненту

0 голосов
/ 12 февраля 2020

Я разрабатываю приложение реагировать js с использованием функциональных компонентов. Я пытаюсь повторно использовать компоненты в коде. У меня есть компонент Frame, который имеет Sider и Header. Я пытаюсь добавить Content компонент к этому кадру для отображения в середине, но он не работает, хотя.

Frame.tsx 

const Frame : React.FC = (props) => {
    const [collapsed, onCollapse] = useState(false);
    const Content = props.content;
    console.log('Content: ',Content);
    return (
        <Layout>
            <SideBar state={{ collapsed: [collapsed, onCollapse]}}/>
            <Layout>
                <HeaderBar state={{ collapsed: [collapsed, onCollapse]}}/>
                {Content}
                <Footer>footer</Footer>
            </Layout>
        </Layout>
    );
}

export default Frame;

PublicRoute.tsx 

interface PublicRouteProps extends RouteProps {
    // tslint:disable-next-line:no-any
    component: any;
    isAuthorized: boolean;
    content: Content;
}

const PublicRoute = (props: PublicRouteProps) => {
    const { component: Component, isAuthorized, content: Dummy, ...rest } = props;
    return (
        <Route
            {...rest}
            render={(routeProps) =>
                isAuthorized ? (

                    <Component {...routeProps}/>
                ) : (
                    <Redirect
                        to={{
                            pathname: '/login',
                            state: { from: routeProps.location }
                        }}
                    />
                )
            }
        />
    );
};

export default PublicRoute;

App.tsx 

return (
        <BrowserRouter>
            <div>
                <Switch>
                    <PublicRoute path="/" component={Frame} exact isAuthorized={true} content={Dummy}/>
                    <Route path="/login" component={NewLogin} exact isAuthorized={true}/>
                </Switch>
            </div>
        </BrowserRouter>
    );

Я не могу передавать содержимое динамически, и я не уверен, что не так. Спасибо за ваше время.

Ответы [ 2 ]

1 голос
/ 12 февраля 2020

Вы должны перейти к компоненту с помощью <Content />, иначе он не будет создан.

Вот полный пример 

import React from "react";
import "./styles.css";

function Parent({content}) {
  return (
    <div>
      {content}
    </div>
  )
}

function Content() {
  return (
    <h1>Hello</h1>
  )
}

export default function App() {
  return (
    <div className="App">
      <Parent content={<Content/>} />
    </div>
  );
}
1 голос
/ 12 февраля 2020

Вы передаете компоненты следующим образом:.

Попробуйте что-то вроде этого: 

return (
    <BrowserRouter>
        <div>
            <Switch>
                <PublicRoute path="/" component={<Frame />} exact isAuthorized={true} content={<Dummy />}/>
                <Route path="/login" component={<NewLogin />} exact isAuthorized={true}/>
            </Switch>
        </div>
    </BrowserRouter>
);
...