[英]Pass props to other component ReactJS
我的index.js
具有以下结构:
ReactDOM.render(
<React.Fragment>
<Header />
<App />
<Footer />
</React.Fragment>,
document.getElementById("root")
);
我的App.js
看起来像这样:
class App extends Component {
render() {
return(
<Router>
<React.Fragment>
<Route exact path='/' component={Main} />
<Route path="/login" component={Login} />
// ... etc
</React.Fragment>
</Router>
);
}
}
export default App;
问题是我想根据App
组件中显示的组件来不同地渲染Footer
。 那就是如果渲染了Main
组件,我想在Footer
添加一些其他内容,因为其他任何组件的页脚均未更改。 有什么办法吗? 我想传递一个prop并基于它渲染页脚,但是如何通过这样的结构传递它呢? 也许我需要重新组织代码以实现这一目标? 谢谢。
您应该将相同的属性从父组件传递给Footer
和App
。 因此,最好将这两个包装在另一个组件中。
例:
class Header extends React.Component {
render() {
return <div>HEADER</div>;
}
}
class App extends React.Component {
render() {
return <div>APP: {this.props.name}</div>
}
}
class Footer extends React.Component {
render() {
return this.props.color === 'test' ? <div>FOOTER TEST</div> : <div>FOOTER NOT TEST</div>;
}
}
class Main extends React.Component {
render() {
return <React.Fragment>
<Header />
<App {...this.props} />
<Footer {...this.props} />
</React.Fragment>;
}
}
ReactDOM.render(
<Main name="test"></Main>,
document.getElementById("root")
);
如果将<Footer />
元素放在“ routes-provider”中,则可以从页脚中访问当前路由,然后可以定义定义。
就像是:
componentDidMount() {
let path = this.props.location.pathname
this.setState({path})
}
render() {
if (this.state.path === '/main') {
return <div>main</div>
} else {
return <div>not main</div>
}
}
另一种可能性是将您的应用程序和页脚包装到“高阶组件”中,并将相关的道具传递给他们。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.