Question

现在，我正在尝试从道具向道具发送道具，但是我不能。我该怎么办？

有人可以告诉我如何将道具组件转换为道具组件（焦点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"));

如何发送道具与道具组件反应

2 个答案: