在React中多个状态共享相同的视图或组件

Question

是否有可能两个状态更新一个视图/组件？ 我们如何做到这一点？

this.state({
 dog: 'Canny'
 person: 'Brian'
})

<Text>{blank} likes beans.<Text>

例如，当this.state.dog更新时，该字段将显示为“ Canny likes beans”，当this.state.person更新时，该字段将显示为“ Brian likes beans”。有办法吗？

编辑：这对于视图仅具有一个窗口来显示两个状态的更新的情况很有用，并且我了解您可以使用渲染函数来实现此目的，但是有一种简单的“第一性”反应方式为此吗？

Answer 1

这应该通过引入另一个状态属性personOrDog来完成：

<Text>{this.state.personOrDog} likes beans.<Text>

没有直接的方法可以检查先前和当前的person和dog状态来计算personOrDog。 shouldComponentUpdate中可以使用以前和当前状态，但是不建议使用setState来设置personOrDog，因为它滥用了此生命周期挂钩。

这意味着，最好在状态更新的地方解决此问题：

this.setState({
  dog: 'Canny',
  personOrDog: 'Canny'
});

要使代码DRYer可用，可以使用一个助手来设置这些属性，例如：

const personOrDog = (key, value) => ({
  [key]: value,
  personOrDog: value
});

...

this.setState(personOrDog('dog', 'Canny'));

Answer 2

对于我来说，这是React js的常见情况。每当您更改状态时，Text组件的innerHTML都会重新呈现。

this.state({
 name:
 table:
})

<Text>
  Now current state.name is: {this.state.name}, current state.table: {this.state.name}
</Text>

PS：并且别忘了关闭标签：< / 文本>