Question

我有这个组件，但是它没有在状态构造函数中设置show。我可以在console.log中显示道具并显示正确的参数，但出于某种原因，show并未设置。

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} />

我真的只想做一个＆＃34;工具提示＆＃34;父母可以打开工具提示。

Answer 1

当你使用console.log（this.props）时一切正常吗？

这可能只是一个错字，但在父组件中你有

string

也许它应该是'showSubPanel'，最后有一个L？

React组件仅在构造函数中为一个键设置状态。 ES6

1 个答案: