Javascript 在 React 中访问孩子的父状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41825557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing parent state in child in React
提问by GluePear
I have (e.g.) two components in React. The first, app.js, is the root component. It imports some JSONdata and puts it in its state. This works fine (I can see it in the React devtools).
我在 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>
);
}
}
The second, docs.js, is meant to show this JSONdata. To do that it needs to access the stateof app.js. At the moment it errors, and I know why (thisdoes not include app.js). But how then can I pass the statefrom app.jsto docs.js?
第二个 ,docs.js用于显示此JSON数据。为此，它需要访问stateof app.js。目前它出错了，我知道为什么（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>
)
}
}
采纳答案by pwolaq
The proper way of doing this would be by passing state as propsto Docscomponent.
这样做的正确方法是将状态传递props给Docs组件。
However, because you are using React Routerit can be accessed in a bit different way: this.props.route.paraminstead of default this.props.param
但是，由于您正在使用React Router它，因此可以以稍微不同的方式访问它：this.props.route.param而不是默认this.props.param
So your code should look more or less like this:
所以你的代码应该或多或少是这样的：
<Route path="/docs" component={Docs} docs={this.state.docs} />
and
和
{this.props.route.docs.map(function(study, key) {
return <p>Random text here</p>;
})}
回答by Mayank Shukla
Another way of doing this is:
另一种方法是：
<Route path="/docs" component={() => <Docs docs={this.state.docs}/>}>
If you need to pass children:
如果您需要传递孩子：
<Route path="/" component={(props) => <Docs docs={this.state.docs}>{props.children}</Docs>}>
If you are doing it like this, then you can access your props values directly by this.props.docsin Child Component:
如果你这样做，那么你可以直接this.props.docs在子组件中访问你的道具值：
{
this.props.docs.map((study, key)=> {
return <p key={key}>Random text here</p>;
})
}
回答by lavee_singh
Another way of doing this will be
另一种方法是
<Route path='/' render={ routeProps => <Home
{...routeProps}
docs={this.state.docs}
/>
}
/>
While in the child component you can access docsusing
在子组件中，您可以docs使用
this.props.docs
Hope it helps!
希望能帮助到你！
