javascript - Reactjs：将功能组件传递给另一个功能组件以

Question

我正在使用功能组件开发一个反应 js 应用程序。我正在尝试重用代码中的组件。我有一个Frame包含 Sider 和 Header 的组件。我正在尝试将Content组件添加到该框架以显示在中间，但它不起作用。

框架.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;

公共路由.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;

应用程序.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>
    );

我无法动态传递内容，我不确定出了什么问题。感谢您的时间。

Answer 1

您必须传递给组件，<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>
  );
}

Answer 2

你像这样传递组件：.

尝试这样的事情：

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