React：为什么子组件在道具更改时不更新

Question

为什么在下面的伪代码示例中，当 Container 更改 foo.bar 时 Child 不会重新渲染？

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

即使我在修改 Container 中的值后调用 forceUpdate() ，Child 仍然显示旧值。

原文由 Tuomas Toivonen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

更新子项以使其属性“key”等于名称。每次键更改时，组件都会重新渲染。

 Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

原文由 polina-c 发布，翻译遵循 CC BY-SA 4.0 许可协议