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的{{1}}。目前它出错了，我知道原因（app.js不包括this）。但是，我怎样才能将app.js从state传递给app.js？

docs.js

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>; 
})}

Answer 2

另一种方法是：

<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>; 
    })
}

Answer 3

另一种方法是

        <Route path='/' render={ routeProps => <Home 
            {...routeProps} 
            docs={this.state.docs}
            /> 
          } 
        />

在子组件中，您可以使用

访问docs

this.props.docs

希望它有所帮助！

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

3 个答案: