React Native中如何根据变量是否存在动态添加组件prop

有两种常用的内联实现方案，都不需要重复写两次MyComponent组件：

方案1：精准判断prop2是否被传入 #

如果你的判断逻辑是「只有prop2完全没被传给SomeScreen的时候才省略propX，哪怕传入的是null/0/false这类虚值也正常传递propX」，可以用以下写法：

const SomeScreen = ({ children, prop1, prop2 }) => {
  return (
    <MyComponent
      onPress={handlePress}
      someProp={12}
      {...(prop2 !== undefined && { propX: prop2 })}
    >
      {children}
    </MyComponent>
  )
}

原理是：当prop2 !== undefined条件成立时，&&返回{ propX: prop2 }对象，展开后就会给MyComponent加上propX属性；条件不成立时返回布尔值false，React在处理属性展开时会自动忽略布尔值，不会产生任何额外属性。
这种写法和直接写propX={prop2}有本质区别：如果直接写propX={undefined}，MyComponent仍然会接收到propX属性，只是值为undefined；而用上述条件展开的写法，条件不成立时MyComponent完全不会接收到propX属性，和完全没写这个属性的效果完全一致，刚好匹配你的需求。

方案2：按虚值判断省略属性 #

如果你的判断逻辑是「只要prop2是虚值（包括undefined/null/0/false/空字符串）就省略propX」，可以简化判断条件：

const SomeScreen = ({ children, prop1, prop2 }) => {
  return (
    <MyComponent
      onPress={handlePress}
      someProp={12}
      {...(prop2 && { propX: prop2 })}
    >
      {children}
    </MyComponent>
  )
}

这种写法适合prop2的有效值都是非虚值的场景，代码更简洁。

内容的提问来源于stack exchange，提问作者Wasteland