从 React.js 中的父功能组件继承道具

Question

在功能组件中，我想访问从父功能组件继承的道具。为了理解我的意思，我有以下片段：

function MainApp(props) {
    const { classes } = props;
    const [content, setContent] = useState("");

    return (
        <div className={classes.root}>
            <AppBar position="fixed" className={classes.appBar}>
                <Toolbar className={classes.toolbar}>
                    <Typography variant="title" color="inherit" fontWeight="bold">
                        CashCo
                    </Typography>
                    <ToolbarActions className={classes.toolbarActions} />
                </Toolbar>
            </AppBar>
            <main className={classes.appContent}>
                <PageContent content={content} />
            </main>
        </div>
    );
}

function App(props) {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<MainApp />}></Route>
            </Routes>
        </BrowserRouter>
    );
}

我想将 App() 函数中的 props 参数传递给 MainApp()，这样我就不必访问 props.props.some_property 等属性。我怎样才能正确地做到这一点？因为传递像这样的道具 <MainApp props={props} /> 意味着我必须在 MainApp() 中访问像 props.props.some_property 这样的属性，这不是我想要的。我想在 MainApp().

中访问像 props.some_property 这样的道具

Answer 1

您可以将 App 道具散布到 MainApp 上，这样您就可以像这样访问它们 props.classes。

function App(props) {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<MainApp {...props} />}></Route>
            </Routes>
        </BrowserRouter>
    );
}

Answer 2

这样试试

function App(props) {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<MainApp {...props}/>}></Route>
            </Routes>
        </BrowserRouter>
    );
}

从 React.js 中的父功能组件继承道具

Inherit props from parent functional component in React.js

javascript

reactjs

react-props