在反作用中访问父状态

I have (e.g.) two components in React. The first, app.js, is the root component. It imports some JSON data and puts it in its state. This works fine (I can see it in the React devtools).

我有两个组分在反应中。第一个是app.js，是根组件。它导入一些JSON数据并将其置于其状态。这工作得很好(我可以在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 JSON data. To do that it needs to access the state of app.js. At the moment it errors, and I know why (this does not include app.js). But how then can I pass the state from app.js to docs.js?

第二,文档。js，用于显示这个JSON数据。为此，它需要访问app.js的状态。现在它出错了，我知道为什么(不包括app.js)。但是，如何将状态从app.js传递到doc .js呢?

class Docs extends React.Component {
    render() {
        return(
            <div>
                {this.state.docs.map(function(study, key) { 
                    return <p>Random text here</p>; 
                })}
            </div>
        )
    }
}

3 个解决方案

#1

The proper way of doing this would be by passing state as props to Docs component.

这样做的正确方法是将状态作为文档组件的道具进行传递。

However, because you are using React Router it can be accessed in a bit different way: this.props.route.param instead of default this.props.param

但是，由于您使用的是response 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>; 
})}

#2

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.docs in Child Component:

如果你是这样做的，那么你可以直接用这个道具来访问你的道具。子组件的文档:

{
    this.props.docs.map((study, key)=> { 
       return <p key={key}>Random text here</p>; 
    })
}

#3

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 docs using

在子组件中，您可以使用

this.props.docs

Hope it helps!

希望它可以帮助!

#1