[英]Accessing parent state in child in React
我在React中有(例如)两个组件。 第一个是app.js
,它是根组件。 它导入一些JSON
数据并将其置于其state
。 这工作正常(我可以在React devtools中看到它)。
import data from '../data/docs.json';
class App extends Component {
constructor() {
super();
this.state = {
docs: {}
};
}
componentWillMount() {
this.setState({
docs: data
});
}
render() {
return (
<Router history={hashHistory}>
<Route path="/" component={Wrapper}>
<IndexRoute component={Home} />
<Route path="/home" component={Home} />
<Route path="/docs" component={Docs} />
</Route>
</Router>
);
}
}
第二个是docs.js
,用于显示此JSON
数据。 要做到这一点,它需要访问app.js
的state
。 目前它出错了,我知道为什么( this
不包括app.js
)。 但是,如何将state
从app.js
传递给docs.js
?
class Docs extends React.Component {
render() {
return(
<div>
{this.state.docs.map(function(study, key) {
return <p>Random text here</p>;
})}
</div>
)
}
}
这样做的正确方法是将状态作为props
传递给Docs
组件。
但是,因为您使用的是React Router
所以可以通过不同的方式访问它: this.props.route.param
而不是默认的this.props.param
所以你的代码应该或多或少看起来像这样:
<Route path="/docs" component={Docs} docs={this.state.docs} />
和
{this.props.route.docs.map(function(study, key) {
return <p>Random text here</p>;
})}
另一种方法是:
<Route path="/docs" component={() => <Docs docs={this.state.docs}/>}>
如果你需要传递孩子:
<Route path="/" component={(props) => <Docs docs={this.state.docs}>{props.children}</Docs>}>
如果您这样做,那么您可以直接通过子组件中的this.props.docs
访问您的道具值:
{
this.props.docs.map((study, key)=> {
return <p key={key}>Random text here</p>;
})
}
另一种方法是这样做
<Route path='/' render={ routeProps => <Home
{...routeProps}
docs={this.state.docs}
/>
}
/>
而在子组件,您可以访问docs
使用
this.props.docs
希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.