Question

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

为此，我为InfiniteScroll组件提供了一个关键道具。这个想法是每当用户更改设置时

this.state.renderCount在setState中增加1

React注意到InfiniteScroll的键属性不同，并从头开始重新渲染该组件。

  <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

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

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

要将它们的key属性传递给子元素，请使用其他名称。

另请参阅：Why is ref not a property in children components?

Answer 2

原来我想得太多了。

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

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

  this.setState({ templates: [] })

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

反应-更改关键道具不会导致子组件的重新呈现

2 个答案: