Question

我的列表组件应该能够根据用户输入的关键字突出显示某个元素属于列表的原因。

我正在使用列表项目中当前的react-highlighter组件，但它要求我发送用户从search box => to the listview => to the list item

输入的关键字

对我来说，react看起来并非redux。我也在使用<SearchBox onChange={setSearchText} value={searchText} /> <List items={item} highlight={searchText}> <ListItem> <Highlight search={searchText}>{name}</Highlight> </ListItem> </List>所以我只有一个商店，而listview和商品并不直接了解商店。它们只是渲染属性的愚蠢组件。

Message<'T>

有没有更优雅的方式来处理这种突出显示？

Answer 1

正如您在评论中提到的，您可以将突出显示功能提升到HighlightedListItem组件中。

<SearchBox onChange={setSearchText} value={searchText} />
<List items={item} >
  <HighlightedListItem item={item} highlight={searchText}>
    {...stuff}
  </ListItem>
</List>

此外，在提前考虑最大化性能时，在添加shouldcomponentupdate时可能更容易推理这种方法

EX：

// HighlightedListItem
shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.item !== this.props.item ||
         nextProps.searchText !== this.props.searchText;
}

如何突出显示反应构建列表中列表项的部分

1 个答案: