Question

我正在尋找幫助將頁面呈現前從屬性字符串轉換爲布爾值。粗體屬性將被設置爲「真」或「假」的字符串。我已經設置了屬性的狀態，但字符串'false'仍然是true。我目前正試圖在我的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

你越來越大膽從道具字符串，但你可以直接更改它，當您最初設置的組件狀態

所以在設置bold您只需將其轉換爲布爾值即可

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

我也有更多的一個評論，你應該避免構造函數訪問的道具，你應該訪問componentWillMount功能

檢查以下應用的更改代碼的道具：

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

我強烈建議使用這種性質（粗體，隱藏...）布爾道具。