React - 更改 key prop 不会导致子组件的重新渲染答案

【问题标题】：React - changing key prop doesn't cause rerender of child componentReact - 更改 key prop 不会导致子组件的重新渲染
【发布时间】：2018-12-22 19:32:34
【问题描述】：

我正在使用react-infinite-scroll 来呈现数据源。每当用户更改他们的设置时，我都想刷新数据源。

为此，我有一个InfiniteScroll 组件的关键道具。这个想法是每当用户更改他们的设置时

this.state.renderCount 在 setState 中增加 1

React 注意到 InfiniteScroll 的 key prop 不同，并从头开始重新渲染组件。

  <Content style={{ padding: "0px 20px" }}>
    <InfiniteScroll
      key={this.state.renderCount}
      style={{ width: "100%", height: "100%" }}
      pageStart={0}
      loadMore={this.loadPosts.bind(this)}
      hasMore={true}
      loader={<div>Loading....</div>}
      useWindow={false}
    >
      {listItems}
    </InfiniteScroll>
  </Content>

刷新代码在componentDidUpdate 中，如果我确定需要刷新，就会调用它：

  this.setState({ renderCount: this.state.renderCount + 1 })

但是，组件并未重置。为什么是这样？

【问题讨论】：

我不确定这一点，但 React 对 key 属性有一个特殊用途，以确保可以唯一标识兄弟姐妹。这可能是您的组件不刷新的原因。我会尝试使用不同的属性名称，看看是否按预期工作。

标签： javascript reactjs infinite-scroll react-props

【解决方案1】：

key 和 ref 是 react 中的特殊关键字。 See

JSX 元素上的大多数 props 都会传递给组件，但是， React 使用了两个特殊的 props（ref 和 key），并且因此不会转发给组件。

例如，尝试从组件访问 this.props.key （即渲染函数或 propTypes）未定义。如果你需要要在子组件中访问相同的值，您应该通过它作为不同的道具（例如：<ListItemWrapper key={result.id} id={result.id} />）。虽然这似乎是多余的，但重要的是将应用逻辑与协调提示分开。

要将 key 属性传递给子元素，请使用另一个名称。

另见：Why is ref not a property in children components?

【讨论】：

【解决方案2】：

原来是我想多了。

使用 react-infinite-scroll 的工作方式，我只需要清除 listItems 数组。

就我而言，我只需要这样做：

  this.setState({ templates: [] })

（listItems 由将模板映射到 jsx 的映射函数生成。

【讨论】：