你能隐藏数组渲染的某些反应片段吗？答案

【问题标题】：Can you hide certain react fragments rendered by array?你能隐藏数组渲染的某些反应片段吗？
【发布时间】：2020-01-15 20:33:51
【问题描述】：

总结

我有大约 100 个反应片段加载到一个数组中，然后传递给我的反应渲染方法。我正在尝试实现一个搜索栏，以便用户可以快速搜索某些标题。就我而言，数组中的每个元素如下所示：

<Grid item md={10} style={{alignContent: 'center', alignItems: 'center', justifyContent: 'center', display: 'all'}}>
  <Card data={json[item]} title={item} onClick={that.props.install} result={testResult} 
</Grid>

每个标题看起来像 20.0.15、20.0.16、20.0.20 等。所以如果用户输入 20.0.1，仅考虑上述情况，我只想隐藏后者。

尝试

我已经完成了快速而肮脏的方法，即在遍历标题后直接删除一个条目，然后 setStating 一个新数组。但我很好奇是否有更好的方法。你会注意到我的 JSX 中有一个display: 'all' 用于网格。当设置为无时，它将隐藏该元素。有没有办法以编程方式设置该值？我尝试深入研究 react 元素并手动设置它，但这会产生以下错误：TypeError: Cannot assign to read only property 'display' of object '#<Object>'

产生此错误的代码： this.state.cardArray[i].props.style.display = 'none';

有没有更简洁的方法来简单地将反应片段隐藏在数组中？

【问题讨论】：

在构建 React 组件之前没有过滤数据有什么原因吗？
你试过过滤数组吗？拥有你的渲染逻辑会很有用。
@Robfz 刚刚查看了 array.filter 并让它工作得很好。感谢您的提示！
@coreyward 我之前没有过滤它，因为它是一个文本输入搜索栏。渲染时，没有输入任何内容，所以我正在渲染所有数据。一旦用户输入了一些东西，我就必须过滤。
@TechyTy 我的意思不是过滤用户输入，我的意思是你所说的数据已经是一个 React Fragment 数组，它们作为 props 传入。

标签： javascript reactjs sorting search

【解决方案1】：

是的，您可以通过编程方式更改 display 值。下面是一个使用三元运算符的示例：

<Grid item md={10} display={title.includes(searchQuery) ? "all" : "none"}>
  <Card title={title}/>
</Grid>

这将有条件地设置display 属性以显示与用户的searchQuery 匹配的标题。

【讨论】：

这看起来很干净。我将不得不针对提到的其他方法对此进行测试。谢谢！