jsx中无法识别布尔值？

Question

我有一个多项选择琐事游戏，我将布尔值 true 或 false 传递给自定义数据属性 .. 各种答案组件中的“正确”。

当点击答案时，我正在运行检查以查看正确属性的值是真还是假。

这是答案之一

<Answer 
    onClick={this.answerClick}
    onMouseEnter={this.hoverEnter} 
    onMouseLeave={this.hoverLeave} 
    correct={this.state.correctAnswer.a1}>
    {this.state.answerSet.a1}
</Answer>

这是答案组件本身

const answer = (props) => (
    <div         
        className={classes.Answer}
        onMouseEnter={props.onMouseEnter} 
        onMouseLeave={props.onMouseLeave}
        onClick={props.onClick}
        data-correct={props.correct}>
        {props.children}
    </div>
)

因此，在单击时，我会检查 data-correct 属性是否具有真值或假值。

answerClick(e) {
    console.log(e.target.dataset.correct)
    if(e.target.dataset.correct === true) {
        this.setState({ score: this.state.score +1, level: this.state.level +1})
        console.log('you have answered correctly')
    } else {
        this.setState({ level: this.state.level +1 })
        console.log('you have answered incorrectly')
    }
}

即使选择了正确答案，它也只会记录错误答案。我知道 data-correct 包含 true 的值，因为我的控制台日志是

console.log(e.target.dataset.correct)

是否发生了我不知道的 jsx/react 行为？当 data-correct 的值为 true 时，为什么这只会默认为 else ？任何帮助都会很棒。

Answer 1

DOM 属性被读取为字符串，而不是布尔值。

if(e.target.dataset.correct === 'true') {...}