javascript - 如何使用 props 组件 React 发送 props

Question

现在，我正在尝试将 props 从 props 发送到组件，但我不能。我该怎么办？

有人可以告诉我如何将 props 组件传递给 props 组件吗 (聚焦 header.jsx 文件，我需要发送 props 中的值，但我不能

谢谢。

index.js

ReactDOM.render(
    <HashRouter>
        <Provider store={store}>
            <Route component={App}/>
        </Provider>
    </HashRouter>,
    document.getElementById('root')
);

serviceWorker.unregister();

app.jsx

render() {
    const { location, lang } = this.props
    return (
    <MuiThemeProvider theme={theme}>
        <IntlProvider key={lang} locale={lang} messages={messages[lang]}>
        <Layout>
                <Switch>
                    <GuestRoute location={location} path='/' component={Welcome} exact/>
                    <GuestRoute location={location} path='/reset/:token' component={ForgotPassword} exact/>
                    <UserRoute location={location} path='/profile' component={Info} exact/>
                    <UserRoute location={location} path='/reset' component={ResetPassword} exact/>
                    <UserRoute location={location} path='/myrestaurant' component={MyRestaurant} exact/>
                    <UserRoute location={location} path='/myrestaurant/:resname' component={MyRestaurant} exact/>
                </Switch>
        </Layout>
        </IntlProvider>
    </MuiThemeProvider>
    );
}

布局.jsx

class InfoPage extends Component {
    render() {
        const { isAuthenticated } = this.props
        return (
            <div>
                { 
                    isAuthenticated 
                        ?
                        <HeaderAuth 
                            component={this.props.children}
                        />
                        :
                    <HeaderNAuth />
                }
                { !isAuthenticated && this.props.children }
            </div>
        )
    }
}

header.jsx

    render() {
        const { classes, locale, theme, logout } = this.props

        return(
            <div className={classes.root}>

                    {
                        this.props.component <-------------- HERE I NEED PROPS VALUE TO THIS COMPONENT ----------------> // what should i do
                    }

            </div>
        )
    }
} 

Answer 1

在这里您可以在 HeaderAuth 中传递整个组件。

class InfoPage extends Component {
    render() {
        const { isAuthenticated } = this.props
        return (
            <div>
                { 
                    isAuthenticated 
                        ?
                        <HeaderAuth newValue={'hello world'}> 
                          {this.props.children}
                        <HeaderAuth/>
                        :
                    <HeaderNAuth />
                }
                { !isAuthenticated && this.props.children }
            </div>
        )
    }
}

现在，在 HeaderAuth 内部，您可以访问 this.props.children 内的该组件。

render() {
        const { classes, locale, theme, logout, newValue } = this.props

        return(
            <div className={classes.root}>
                {newValue}
                {this.props.children}
            </div>
        )
}