问题在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 数据。要做到这一点，它需要访问 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>
        )
    }
}

7819

2018-01-24 10:19

起源

相关的 - 如何在两个反应组件之间建立共享状态？ - vsync

答案:

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

2018-01-24 10:22

我不能发送所有20个组件的状态，还有办法用redux做吗？ - stackdave

这解释了没有。通过它是容易的部分，但那又是什么呢？使用父级状态扩展子级的正确方法是什么，这样它们将共享完全相同的对象而不是子级中的状态副本？ - vsync

@vsync如果您将父级状态作为prop传递给子级，它将是同一个对象。 - pwolaq

一开始它会的。但是之后 setState 将被称为孩子的某个地方，然后孩子的状态将不同步，因为新一代开发人员非常喜欢这种新事物，称为不变性。可怕的事。只会引起麻烦。 - vsync

@vsync如果你想与父母分享孩子的状态，你应该使用回调来修改父亲的状态，并使用道具传递它 - pwolaq

另一种方法是：

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

2018-01-24 11:10

另一种方法是这样做

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

在子组件中，您可以访问 docs 运用

this.props.docs

希望能帮助到你！

2017-11-30 15:47

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

答案:

热门问题

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