如何强制子组件重新渲染？

Question

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

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

问题在于，当我在父母身上this.setState({ currentError: x })时，孩子不会重新渲染，因为错误道具实际上没有改变。我试过this.forceUpdate无济于事。

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

Answer 1

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

然后

this.refs.container.forceUpdate()

如果这是更好的方法，那就不知道

Answer 2

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

<QuestionContainer error={this.state.currentError} /＆GT;

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

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

如果您希望您的示例正常工作，则需要在QuestionContainer中调用该函数：

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

Answer 3

你也可以在父亲的状态下拥有一些计数器变量，并在每次setState时递增它，所以如果你将它传递给孩子，它应该触发孩子的重新渲染。 / p>