Question

我正在使用功能组件开发一个react js应用。我正在尝试重用代码中的组件。我有一个包含Sider和Header的组件Frame。我试图将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>
    );

我无法动态传递内容，而且不确定发生什么问题。谢谢您的时间。

Answer 1

您可以像这样传递组件。

尝试这样的事情：

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 2

您必须使用<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>
  );
}

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

2 个答案: