如何为styled component实现条件渲染动态传递isValid属性

你之前写的三元表达式只写了条件成立时的返回值，缺省了条件不成立的分支：当两个勾选状态未全为true时，整个JSX表达式返回undefined，React不会渲染任何节点，直接导致按钮消失，和你预期的「渲染不带isValid属性的按钮」效果不符。
而且你完全没必要拆分两套JSX来实现这个需求，有更简洁的标准写法。

直接给isValid属性绑定动态计算的布尔值即可，不需要写三元判断渲染两个不同的组件：

// 业务组件中直接使用即可
<Agree isValid={checkedOne && checkedSecond}>Valid</Agree>

逻辑说明 #

• 当checkedOne、checkedSecond两个状态全为true时，isValid属性值为true，组件会应用你定义的激活态样式（白字、天蓝色背景）
• 当任意一个勾选状态为false时，isValid属性值为false，组件会走未激活态样式（灰字、浅灰色背景）
• 这种写法下，未激活时React不会在最终生成的button DOM上挂载isValid属性，完全满足你「不满足条件时不带isValid属性」的要求，效果和手动写<Agree>Valid</Agree>完全一致。

如果你坚持要用三元表达式拆分两种渲染分支，必须补全条件不满足时的返回内容，否则会出现渲染空白的问题：

{
  checkedOne && checkedSecond 
    ? <Agree isValid>Valid</Agree> 
    : <Agree>Valid</Agree>
}

这种写法重复声明了Agree组件和内部文本，后续如果要修改按钮文字、新增其他属性需要同步改两处，维护成本高，不建议使用。

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