当父级状态发生变化时，如何在子路由中重新呈现组件？

Question

我有这个页面，你点击交易按钮，下面的部分来自子路线。数据应根据父路由中的下拉值更改。下面的事务表不会更改。 这是一张快照。

这里的代码有点像。

portfolioid来自dropdown.in parent

 <div style = {{ 'padding':'10px'}} portfolioId={this.state.portfolioId}>
     // display transaction here based on state portfolioid
      {this.props.children}
    </div>

在孩子中我尝试了很多方法，但它没有用。

Answer 1

您实际上并未将portfolioId道具传递给任何子组件。 this.props.children是指包含在组件标记内的组件，因此portfolioId对this.props.children的内容没有任何说法。

您可以创建一个子组件，并将portfolioId作为您尝试过的道具传递下来，然后在子组件中访问它。

父组件

...

render: function() {
    return (
        <div>
            <Portfolios portfolioId={this.state.portfolioId} />
            // Whatever else content...
        </div>
    );
}

...

然后您可以使用this.props.portfolioId访问 Portfolios 组件中的prop，并根据该组件更改视图。

或者，如果您需要使用this.props.children，则可以使用this technique将道具映射到其中。