React.js验证道具输入

Question

我正在尝试将值传递给我的组件'Form'作为props

<Form firstName={'John'} lastName={'Doe'} enabled={1} />

我想知道如何验证布尔值，当使用值1时，分配CSS类活动，否则添加CSS类禁用。

这是我在反应组件中尝试过的，但它没有用。

    <span className="Disabled">{this.props.enabled ? "Active" : 'Disabled'}</span>

非常感谢您的帮助。

Answer 1

如果您希望在<span>上更改课程，则需要在属性className上设置条件，而不是元素的内容：

<span className={(this.props.enabled === 1)? "Active" : 'Disabled'}></span>

Answer 2

如果您想使用1，那么您只需要建立一个this.props.enabled === 1变量来保存真值和假值。

就个人而言，我会启用布尔值true或false，因为它会增加不必要的复杂性，使其成为一个数字。

<span className={this.props.enabled === 1 ? "Active" : 'Disabled'}></span>