当传递给组件状态时，`this.props` 是否总是返回一个真实值？

Question

我想将道具传递给我的反应组件并具有一个功能，我可以在粗体和正常之间切换跨度的字体粗细。我的反应组件：ReactDOM.render(  <div>    <FontChooser min='4' max='40' size='16' text='Fun with React!' bold='false'/>   </div>,document.getElementById('container'));我正在尝试将bold = 'false'道具传递给组件的初始状态，如下所示：class FontChooser extends React.Component {    constructor(props) {    super(props);    this.state = {        hidden: true,        bold: this.props.bold,        size: 16     }    }然后我有这个功能toggleBold() {        this.setState ({            bold: !this.state.bold        });    }它应该呈现：render() {        var weight = this.state.bold ? 'bold':'normal';    return(           <div>           <input type="checkbox" id="boldCheckbox" onChange={this.toggleBold.bind(this)}           <span id="textSpan" style ={{fontWeight: weight, fontSize: this.state.size }}>.                  {this.props.text}</span>           </div>我的问题是应该返回false，但三元运算符执行“粗体”，只有在为真this.props.bold时才应该执行。this.props.bold似乎它被this.props.bold视为真实值而不是虚假值，即使它在组件属性中设置为 false。那么this.props当我们将它传递给组件状态时总是返回一个真实值吗？即使它在组件道具定义中设置为“假”？

Answer 1

您将boldprop 作为字符串传递，并且由于传递的值不是空字符串，因此this.state.bold正在像true在三元中一样评估。

<FontChooser min='4' max='40' size='16' text='Fun with React!' bold='false'/>                                                                     ^

let bold = 'false' 
console.log(!!bold)

解决方案bold，将值作为布尔值传递。

<FontChooser min='4' max='40' size='16' text='Fun with React!' bold={false}/>