代码之家 › 专栏 › 技术社区 › Best Best

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

reactjs javascript

Best Best · 技术社区 · 7 年前

现在,我正试着从道具发送道具到组件,但我不能。我该怎么办?

有人能告诉我如何支撑组件到支撑组件吗 (Focus header.jsx文件我需要以props的形式发送值,但我不能

谢谢您。

索引.js

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

serviceWorker.unregister();

应用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>
        )
    }
}

标题.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>
        )
    }
}

2 回复 | 直到 7 年前

prabin badyakar 7 年前

在这里,您可以在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>
        )
}

Maheer Ali 7 年前

起源

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"));