React - 改变关键道具不会导致子组件的重新渲染

Question

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

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

this.state.renderCount在setState

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 中的特殊关键字。 See

Most props on a JSX element are passed on to the component, however, there are two special props (ref and key) which are used by React, and are thus not forwarded to the component.

For instance, attempting to access this.props.key from a component (i.e., the render function or propTypes) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: <ListItemWrapper key={result.id} id={result.id} />). While this may seem redundant, it’s important to separate app logic from reconciling hints.

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

另请参阅：

Answer 2

原来是我想多了。

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

就我而言，我只需要做：

  this.setState({ templates: [] })

（listItems 是通过映射模板到jsx的map函数生成的）。

React - 改变关键道具不会导致子组件的重新渲染

React - changing key prop doesn't cause rerender of child component

javascript

infinite-scroll

reactjs

react-props