React.js验证道具输入

Question

I'm trying to pass values to my component 'Form' as props

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

I would like to know how to validate boolean value, when enabled with value 1 assign CSS class Active otherwise add CSS class disabled.

This is what I have tried within my react component and it hasn't worked.

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

Your help is highly appreciated.

Answer 1

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

<span className={></span>

Answer 2

If you are wanting to use 1 then you would just need to establish a this.props.enabled === 1 variable somewehre to hold the true and false value.

Personally I would have enabled be a boolean value of true or false as it adds unnecessary complexity to make it a number.

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