getInitialState() 在控制台中显示错误

Question

我正在尝试为我的 react 应用创建切换菜单。

我遇到了“getInitialState()”的一些问题。它的显示错误如下：

警告：getInitialState 是在 Header 上定义的，一个纯 JavaScript 班级。这仅支持使用创建的类 React.createClass。您的意思是定义一个 state 属性吗？*

这是我的代码：

class Header extends Component {
  constructor(props){
    super(props);
  }
  getInitialState(){
    return {"showHideSidenav":"hidden"};
  }

  render() {
    return (
      <div className="header">
        <div className="toggle-btn" onClick={this.toggleSidenav.bind(this)}>
          <div>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <span>Menu</span>
        </div>
        <div className={this.props.showHideSidenav} id="main-menu">
          <ul>
            <li>
               1
            </li>
            <li>
               2
            </li>
            <li>
               3
            </li>
            <li>
              4
            </li>
          </ul>
        </div>
      </div>
    )
  }
  toggleSidenav() {
    var css = (this.props.showHideSidenav === "hidden") ? "show" : "hidden";
    this.setState({"showHideSidenav":css});
  }
}

我该如何解决这个问题？

Answer 1

我想你可以在这里找到答案 -> React, ES6 - getInitialState was defined on a plain JavaScript class

总结一下：

如果你使用扩展 React.Component 的 es6 类，你需要在构造函数中定义状态：

this.state = {...}

getInitialState() 用于 es5 React.createClass 函数中。