布尔无法在jsx中识别？

Question

I have a multiple choice trivia game, I'm passing a boolean value of true or false to a custom data attribute .. 'correct' in the various answer components.

When the answer is clicked on I'm running a check to see if the correct attribute has a value of true or false.

Here is one of the answers

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

And here is the answer component itself

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

So, on click I check to see if the data-correct attribute has a true or false value.

 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') } } 

It only registers a false answer even when the correct one is selected. I know that data-correct contains the value of true, because of my console log of the

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

Is there a jsx/react behavior taking place I'm not aware of? Why would this only default to the else when the value of data-correct is true? Any help would be great.

Answer 1

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

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