Question

如何使用 props 组件 react 发送 props

2019-02-01

101

javascript reactjs

现在，我尝试将 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>
    );
}

layout.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>
        )
}

Answer 2

父组件

class Parent extends Component {
    render() { 
        return ( <div><Child component={this.props.children}/></div> );
    }
}

父组件将把其子组件传递给子组件

class Child extends Component{
    render(){
        return(<div>{this.props.component}I am a child which revieve component in props</div>)
    }
}

父组件以 div 作为其子组件进行渲染

ReactDOM.render(<Parent>
    <div style={{color:"red"}}>I am the comppent passed as from parent to Child</div>
    </Parent>, document.getElementById("root"));