React組件只爲構造函數中的一個鍵設置狀態。 ES6

我有這個組件，但它沒有在狀態構造函數中設置顯示。我可以console.log道具和他們顯示正確的參數，但出於某種原因，顯示沒有設置。React組件只爲構造函數中的一個鍵設置狀態。 ES6

class SubstitutionPanel extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     suggestions: this.props.synonyms_with_levels, 
     show: this.props.show 
    } 
    } 

    handleToggleShow() { 
    this.setState({ 
     show: false 
    }) 
    } 


    render() { 
    console.log("sub panel") 
    console.log(this.state) 
    console.log(this.props) 
    if (this.props.synonyms_with_levels.length > 0 && this.state.show) { 
     return(
     <div className="substitution-panel"> 
      <div onClick={() => this.handleToggleShow()} className="glyphicon glyphicon-remove hover-hand"></div> 
      {this.props.synonyms_with_levels} 
     </div> 
    );  
    } else { 
     return (
     <span> 
     </span> 
    ); 
    } 
    } 
}

呈現此子組件的父看起來是這樣的：

<SubstitutionPanel synonyms_with_levels= {this.props.synonyms_with_levels} show={this.state.showSubPane} />

我真的只是想要做一個「工具提示」裏的家長可以打開提示。

來源

2017-03-16 Josh

你是說'this.state.show'沒有顯示正確的值，當你console.log它在構造函數中，即使'this.props.show'顯示正確的值？或者你的'setState'調用不能正常工作？ –

即使我在父項中將它傳遞爲true，this.state.show仍然顯示爲false。構造函數是設置建議，但不能設置「顯示」。 – Josh

它似乎對我來說工作正常：https://jsbin.com/xocebaduwa/edit?js,output你確定'synonyms _with_levels'不是零長度嗎？ –

當你console.log（this.props）時，一切正常嗎？

這可能只是一個錯字這裏，但在父組件必須

show={this.state.showSubPane}

，也許它應該是「showSubPanel」有一個L在結束了嗎？

來源

2017-03-16 16:48:46

React組件只爲構造函數中的一個鍵設置狀態。 ES6

回答

相關問題