Question

我是React的新手，并努力学习如何使用道具＆＃39;并且＆＃39;州＆＃39;在线课程。在线课程使用ES5，但我的IDE是为ES6设置的。我已经通过转换大多数示例就好了。但以下是令人费解的。该示例工作正常，但我的ES6转换没有 - 页面呈现为空白。我查看了＃34;可能已经有你的答案的问题＆＃34;但没有透露我的遗漏/错误。我在语法上对其他更改进行了验证。：）

我在App.js＆＃39;中的转换文件

import React, { Component } from 'react';

let green = '#39D1B4';
let yellow = '#FFD712';

class Toggle extends Component {

  getInitialState() {
    return {color: green};
  }

  changeColor(){
    let newColor = this.state.color === green ? yellow : green;
    this.setState({color: newColor});
  }

  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change My Color
        </h1>
        <button onClick={this.changeColor}>
          Change Color
        </button>
      </div>
    );
  }
}

export default Toggle;

我在'index.js＆＃39;中的转换文件

import React from 'react';
import ReactDOM from 'react-dom';
import Toggle from './App';

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

＆＃39;的index.html＆＃39;文件

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Call 'this.setState' From Another Function</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

$ npm start说：

编译成功！

该应用程序正在运行：

http://localhost:3000/

请注意，开发版本未进行优化。要创建生产版本，请使用npm run build。

是的，我从控制台获得了以下内容：

Warning: getInitialState was defined on Toggle, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?
printWarning @ warning.js:36
App.js:20Uncaught TypeError: Cannot read property 'color' of null
    at Toggle.render (App.js:20)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
content.js:4186 Uncaught TypeError: Cannot read property 'indexOf' of null
    at content.js:4186

在添加构造函数，绑定方法和修复onClick语法后，看起来一切正常。方向表示赞赏。感谢。

Answer 1

三件事：

ES6风格的React组件中没有getInitialState。在Toggle：
的构造函数中设置状态
```
constructor(props)
{
    super(props);
    this.state = { color: green };
}
```
React does not automatically bind component methods to this in ES6-style components.因此，当您执行onClick={this.changeColor}并触发onClick回调时，this将为null，从而导致其他错误。通过在构造函数中将this.changeColor绑定到this来解决此问题：
```
constructor(props)
{
    super(props);
    this.state = { color: green };
    this.changeColor = this.changeColor.bind(this);
}
```
或者，为onClick使用ES6风格的箭头功能：onClick={() => this.changeColor()}
您的index.html不包含您的脚本。这可能只是您问题中的复制粘贴错误，但请确保包含您的脚本：
```
<script src="index.js"></script>
```

Answer 2

我没有看到这会导致渲染，但是你不能在React类组件中使用getInitialState（）。您需要使用类的构造函数来执行此操作：

import React, { Component } from 'react';

let green = '#39D1B4';
let yellow = '#FFD712';
class Toggle extends Component {

  constructor() {
    super();
    this.state = {
      color: green
    }
  }

  changeColor(){
    let newColor = this.state.color === green ? yellow : green;
    this.setState({color: newColor});
  }

  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change My Color
        </h1>
        <button onClick={this.changeColor}>
          Change Color
        </button>
      </div>
    );
  }
}

export default Toggle;

Answer 3

使用类时，没有getInitialState()。为此，在构造函数中设置初始状态：

class SomeComponent extends Component {
  constructor(props) {
    super(props);

    // Define initial state here
    this.state = {
      color: '#39D1B4'
    };
  }
  // ...
}

从ES5转换为ES6语法时，为什么我的代码不起作用？

我在App.js＆＃39;中的转换文件

我在'index.js＆＃39;中的转换文件

＆＃39;的index.html＆＃39;文件

$ npm start说：

是的，我从控制台获得了以下内容：

3 个答案: