Question

首先，这样做有意义吗？

其次，我将解释为什么我在考虑这样做。

我有一个组件，我让用户点击2个选项中的1个。是或否。它们要么被添加到yesArray，要么被添加到noArray。该组件称为Decision。

一旦他们点击是或否，我就会渲染Thanks组件。我想要那些说“是”的人以及那些拒绝在这个感谢页面上显示的人的阵列。

问题是使数组在Decision中的逻辑，但我希望它显示在Thanks上，但是如果我从Decision组件传递这样的支柱：

<Thanks
   showYesArray={this.state.yesArray}
/>

然后，只要呈现<Thanks />，这将呈现<Decision />组件，但在我的父组件<Thanks />中只应在状态更改触发时呈现，这可能与何时呈现<Decision />

如果需要可以发布更多代码并解释更多

Answer 1

您可以使用state.decision之类的标记，最初为false，在点击是/否时将其设置为true，并仅在{{1} Thanks时使用true组件}}

{this.state.decision && <Thanks showYesArray={this.state.yesArray} />}

Answer 2

您可以使用shouldComponentUpdate（）并在不需要更新时返回false。但是更多的代码可能非常有助于了解您的意思。

Answer 3

状态应该在容纳感谢和决策元素的容器元素中。

render() {
  return (
    <Decision
      onYes={this.handleYes}
      onNo={this.handleNo}
    />

    <Thanks
      active={this.state.thanksActive}
      yesArray={this.state.yesArray}
      noArray={this.state.noArray}
    />
  )
}

在没有呈现任何内容的情况下传递道具

3 个答案: