React - 改变key属性不会导致子组件重新渲染

Question

我正在使用react-infinite-scroll来渲染数据源。每当用户更改其设置时，我希望刷新数据源。

为此，我在InfiniteScroll组件中有一个关键属性。这样做的想法是每当用户更改其设置时，刷新数据源。

1. this.state.renderCount is incremented by 1 in setState

2. React notices that the key prop of InfiniteScroll is different, and re-renders the component from scratch.

     <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 })

然而，该组件并未重置。为什么？

- Foobar

---

我不确定，但是React有一个特殊的目的，用于key属性，以确保兄弟元素可以被唯一识别。这可能是为什么您的组件没有刷新的原因。我建议尝试使用不同的属性名称，看看是否按预期工作。 - Mikkel

Answer 1

key 和 ref 是 React 中的特殊关键字。请见链接

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

例如，在组件中（即 render 函数或 propTypes 中）尝试访问 this.props.key 是未定义的。如果您需要在子组件中访问相同的值，则应将其作为不同的 prop 传递（例如：<ListItemWrapper key={result.id} id={result.id} />）。虽然这可能看起来有些冗余，但将应用程序逻辑与协调提示分开非常重要。

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

请参阅：为什么 ref 不是子组件的属性？

- Syed Osama Maruf

Answer 2

原来我想太多了。

根据react-infinite-scroll的工作方式，我只需要清除listItems数组即可。

在我的情况下，我只需要执行以下操作：

  this.setState({ templates: [] })

(listItems 是由一个 map 函数生成的，该函数将模板映射到 JSX)。

- Foobar