如何强制子组件呈现

How to force child components to rerender?

本文关键字：组件 何强制      更新时间：2023-09-26

我目前正在初始化父组件中的子组件并将它们放入数组中。我将一个函数传递给孩子们的道具，它只获取状态。

 <QuestionContainer
    error={ () => this.state.currentError }
 />

问题是，当我做this.setState({ currentError: x })在父子不会呈现，因为错误道具实际上没有改变。我试过this.forceUpdate，但没有用。

我知道我可以用一种不需要将子组件初始化为数组的方式来设计它，但我想知道在这种情况下我如何强制呈现

<QuestionContainer
    error={ () => this.state.currentError }
    ref="container"
 />
然后

this.refs.container.forceUpdate()

不知道这是不是比

更好的方法

不清楚为什么你传递一个函数，返回currentError的值，而不仅仅是值本身。你就不能这样传递吗?

<QuestionContainer error={this.state.currentError} />

然后，在QuestionContainer的渲染中，使用它，例如

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

如果你想让你的例子工作，你需要调用QuestionContainer中的函数:

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

你也可以在父级状态中设置一些计数器变量，并在每次执行setState时增加它，这样如果你将它传递给子级，它应该会触发子级的渲染

相关文章：