如果“bold”属性设置为“true”，则文本应以粗体显示

Question

我正在寻找在呈现页面之前将属性从字符串转换为布尔值的帮助。 粗体属性将设置为"true"或"false"字符串。 我已经设置了属性的状态，但字符串"false"仍然是真的。 我目前正在尝试在我的handleClick函数中转换为布尔值，但我需要在呈现页面之前进行转换。

.HTML

<script type="text/jsx">
ReactDOM.render(
 <div>
 <FontChooser min='4' max='40' size='16' text='Fun with React!' bold='true'/>
</div>, document.getElementById('container'));
</script>

.JS

class FontChooser extends React.Component {
constructor(props) {
super(props);
this.state = {hidden: 'true', size: this.props.size, bold: this.props.bold, min : this.props.min, max: this.props.max, color: 'black'}; 
}

handleClick() {
    if(this.state.hidden == 'true') {
        if(this.props.bold == "true") {
            this.setState({bold: true}) 
        } else {
            this.setState({bold: false})
        }
        this.setState({hidden: ''});
    }
    else {
        this.setState({hidden: 'true'});    
    }           
}
decrease() {
    if (this.state.size >= Number(this.state.min) +1) 
    this.setState({size: Number(this.state.size) -1});
    if(this.state.size == Number(this.state.min) +1|| this.state.size == Number(this.state.min)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }
}
increase() {
    if (this.state.size <= Number(this.state.max) -1)       
    this.setState({size: Number(this.state.size) +1});  
    if(this.state.size == Number(this.state.max) -1|| this.state.size == Number(this.state.max)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }

}
toggle() {
    this.setState({bold: !this.state.bold});
}


render() {
    var weight = this.state.bold ? 'bold' : 'normal';       
    var checked = this.state.bold ? 'true' : '';
    var inlineStyle = {
        fontSize: this.state.size,
        fontWeight: weight,         
    };
    var fontSizeSpanStyle = {
        color: this.state.color
    }


return(
       <div>
       <input type="checkbox" id="boldCheckbox" checked={checked} hidden={this.state.hidden}onClick={this.toggle.bind(this)} />
       <button id="decreaseButton" hidden={this.state.hidden} onClick={this.decrease.bind(this)} >-</button>
       <span id="fontSizeSpan" hidden={this.state.hidden} style={fontSizeSpanStyle} >{this.state.size}</span>
       <button id="increaseButton" hidden={this.state.hidden} onClick={this.increase.bind(this)} >+</button>
       <span id="textSpan" onClick={this.handleClick.bind(this)} style={inlineStyle} >{this.props.text}
       </span>       
       </div>
);
}
}

Answer 1

你从 props 中变得粗体为字符串，但你可以在最初设置组件状态时直接更改它

因此，在设置bold状态时，您只需将其转换为布尔值即可

bold: (this.props.bold == "true" ? true : false)

我还有一条评论，您应该避免从构造函数访问 props，您应该在组件中访问 propWillMount 函数

检查以下代码并应用更改：

class FontChooser extends React.Component {
constructor(props) {
super(props);
   this.state = {};
}
componentWillMount(){
    this.setState({hidden: 'true', size: this.props.size, bold: (this.props.bold == "true" ? true : false) , min : this.props.min, max: this.props.max, color: 'black'}); 
}

handleClick() {
    if(this.state.hidden == 'true') {
        if(this.props.bold == "true") {
            this.setState({bold: true}) 
        } else {
            this.setState({bold: false})
        }
        this.setState({hidden: ''});
    }
    else {
        this.setState({hidden: 'true'});    
    }           
}
decrease() {
    if (this.state.size >= Number(this.state.min) +1) 
    this.setState({size: Number(this.state.size) -1});
    if(this.state.size == Number(this.state.min) +1|| this.state.size == Number(this.state.min)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }
}
increase() {
    if (this.state.size <= Number(this.state.max) -1)       
    this.setState({size: Number(this.state.size) +1});  
    if(this.state.size == Number(this.state.max) -1|| this.state.size == Number(this.state.max)) {
        this.setState({color: 'red'})
    } else {
        this.setState({color: 'black'})
    }

}
toggle() {
    this.setState({bold: !this.state.bold});
}


render() {
    var weight = this.state.bold ? 'bold' : 'normal';       
    var checked = this.state.bold ? 'true' : '';
    var inlineStyle = {
        fontSize: this.state.size,
        fontWeight: weight,         
    };
    var fontSizeSpanStyle = {
        color: this.state.color
    }


return(
       <div>
       <input type="checkbox" id="boldCheckbox" checked={checked} hidden={this.state.hidden}onClick={this.toggle.bind(this)} />
       <button id="decreaseButton" hidden={this.state.hidden} onClick={this.decrease.bind(this)} >-</button>
       <span id="fontSizeSpan" hidden={this.state.hidden} style={fontSizeSpanStyle} >{this.state.size}</span>
       <button id="increaseButton" hidden={this.state.hidden} onClick={this.increase.bind(this)} >+</button>
       <span id="textSpan" onClick={this.handleClick.bind(this)} style={inlineStyle} >{this.props.text}
       </span>       
       </div>
);}
}

Answer 2

如果你真的想（或必须）使用字符串值，也许最简单的处理方法是：

constructor() {
  this.state = {
    ...
    bold: this.props.bold === 'true',
  }
}

然后在每次bold更改时：

this.setState({
  bold: !this.state.bold,
})

我强烈建议使用这样的属性（粗体，隐藏...）作为布尔道具。