优化渲染React组件依赖于props

Question

我有一个渲染的组件取决于我传递给它的道具。以前我使用逻辑运算符OR，但是当它变得更多道具时它看起来很难看，我用Array.prototype.some方法将所有这些转换为数组。你知道怎么做得更好或者是最好的做法吗？

在：

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

后：

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

Answer 1

取决于道具的传递方式，您可以使用传播操作

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

然而，问题没有一个解决方案，您可以使用Redux（及其替代方案）通过全局存储来管理组件的全局呈现。如果您更关心的是必须使用道具阵列进行渲染，那么它可以很好地查看其他数据结构，例如地图。

反应哲学试图推动可重复使用的组件是可能的。最好的方法是尽可能使用无状态组件，并处理智能父组件中的所有渲染逻辑。所以也许看看把逻辑放在父组件中。