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

javascript html reactjs

2022-08-30 00:47:11

为什么在下面的伪代码示例中，当容器 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>
  }
}

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

答案 1

更新子项，使属性“key”等于名称。每次密钥更改时，组件都会重新呈现。

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

答案 2

因为如果父级的道具发生更改，则子级不会重新呈现，但其状态发生更改:)

你所展示的是：https://facebook.github.io/react/tips/communicate-between-components.html

它将通过 props 将数据从父项传递到子项，但那里没有重新呈现逻辑。

您需要为父项设置一些状态，然后在父项更改状态上重新呈现子项。这可能会有所帮助。https://facebook.github.io/react/tips/expose-component-functions.html