javascript - 优化渲染 React Components 依赖于 props

Question

我有一个组件，它的渲染取决于我传递给它的 Prop 。以前我使用逻辑运算符 OR，但是当变得更多 props 时它看起来很难看，我用 Array.prototype.some 方法将所有这些切换到数组。您知道如何做得更好或一些最佳实践吗？

之前:

<Wrapper>
{(props1 || props2 || props3 || props4) && <Component/>}
</Wrapper>

之后:

<Wrapper>
{[props1, props2, props3, props4].some(x => x) && <Component/>}
</Wrapper>

Answer 1

根据 Prop 的传递方式，您可以使用扩展运算符

<Wrapper>
{...this.props.someArray.some(x => x) && <Component/>}
</Wrapper>

这个问题没有单一的解决方案，但是，您可以使用 Redux(及其替代方案)通过全局存储来管理组件的全局渲染。如果您更关心的是必须使用 Prop 数组来渲染，那么最好看看其他数据结构，例如 map 。

React 哲学试图插入可重用组件成为可能。最好的方法是尽可能使用无状态组件，并在智能父组件中处理所有渲染逻辑。因此，也许可以考虑将逻辑放入父组件中。