在React中访问子节点中的父节点状态

Question

我在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数据.要做到这一点就需要访问state的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>
        )
    }
}

Answer 1

这样做的正确方法是将状态传递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>; 
})}