当传递给组件状态时，`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&nbsp;min='4'&nbsp;max='40'&nbsp;size='16'&nbsp;text='Fun&nbsp;with&nbsp;React!'&nbsp;bold='false'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^let&nbsp;bold&nbsp;=&nbsp;'false'&nbsp; console.log(!!bold)解决方案bold，将值作为布尔值传递。<FontChooser&nbsp;min='4'&nbsp;max='40'&nbsp;size='16'&nbsp;text='Fun&nbsp;with&nbsp;React!'&nbsp;bold={false}/>