javascript - 如何有条件地将一组 Prop 添加到 react 组件？

Question

我有一组 Prop ，仅当满足特定条件时才需要将其应用于组件。
所以我将 Prop 分组在一个对象中:

const props = {
  a: "",
  b: "",
};

然后尝试有条件地将它们应用到组件:

<div {condition && ...props}/>

但 React 似乎不允许这样做，那么还有其他方法吗？

Answer 1

您应该包装您的表达式，然后对该表达式的结果使用扩展语法:

<div {...(condition && props)}></div>

当条件为 false 时，&& 运算符的计算结果为 false。因此，传播语法最终将传播 false，这在对象属性传播中是一个空操作。当 condition 为 true 时，&& 计算为 props，允许您传播对象属性。