Reactjs React中的计算字段？

我是React/Redux新手，但这正是我计划在即将到来的项目中使用的。是否存在KnockoutJs的ComputedObservable的等价物？我计划有一个带有主数组的外部组件，然后有多个子组件，每个子组件负责根据某些条件显示父组件数组中的项目子集。想象一下：

[{ id:1， 颜色：“蓝色” }, { id:2， 颜色：“蓝色” }, { id:3， 颜色：“绿色” }]

（例如，第一个组件实例中显示蓝色，第二个组件实例中显示绿色）。我希望确保它们之间的依赖关系是明确的，这样，如果父数组中某个项的值发生更改，恰好显示该项的子组件将重新加载

我设想父组件将通过道具将主数组传递给每个子组件，然后每个子组件将负责决定显示哪个子集，但我仍然不确定它如何知道何时重新渲染。（假设我将“蓝色”更新为“绿色”）

---

谢谢…

您不必担心何时重新渲染。React将为您进行更新

在你的情况下，我会这样做：

子组件

const Item = props => (
  <div style={{ color: props.color }}>
    {props.color}
  </div>
)

render() {
  return (
    <div>
      {this.state.data.map(d => <Item key={d.id} color={d.color} />)}
    </div>
  )
}

const Item=props=>(
{props.color}
)

父组件的渲染（）

const Item = props => (
  <div style={{ color: props.color }}>
    {props.color}
  </div>
)

render() {
  return (
    <div>
      {this.state.data.map(d => <Item key={d.id} color={d.color} />)}
    </div>
  )
}

render（）{
返回(
{this.state.data.map（d=>）}
)
}

现在，当您调用

setState（）

（或者如果

数据

来自Redux，并且您发送一个操作来更新数据），React将重新呈现父组件和所有子组件

---

您可以在这里看到工作示例：

这非常有用。谢谢你的例子。UpdateColor中的一些语法我不熟悉，所以我将花一些时间来复习。最后一个问题，如果您有时间的话：您是否能够调整它，使蓝色元素显示在一个div中，绿色元素显示在另一个div中？这取决于您的用例。如果相同颜色的元素总是被包装在一个相同的

div

，我将改变数据的结构，例如：

{blue:[{id:1，xxx:ooo'}，{id:2，xxx:ooo'}，{id:3，xxx:zzz'}}

，这很有趣。我对以这种方式存储数据犹豫不决，原因有两个：1）我计划频繁地在蓝色和绿色之间移动项目（这不是什么大问题，只是更新一个字段而已），2）我仍然对整个列表上的统计数据感兴趣（例如，总共有多少项？同样，可以对两个数组求和，但如果它们仍然在一个数组中，则更容易）。也许我没有正确地考虑这一点。我认为您并不总是需要完全规范化数据。对于一个简单的场景，数组可以工作。我在这里写了另一个示例：