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

Question

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

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

1. this.state.renderCount在setState增加 1

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

但是，不会重置该组件。 为什么是这样？

Answer 1

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

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

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

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

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

Answer 2

原来是我多虑了。

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

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

  this.setState({ templates: [] })

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