Question

我在React中使用ES6语法，并编写如下组件：

function chartsReducer(state, {payload}) {
  const {cid} = payload;
  const currentChart = state[cid] || {};
  return {...state, [cid]: {...currentChart, ...payload}};
}

但浏览器引发了我的警告：

警告：在Loginform上定义了getInitialState，这是一个普通的JavaScript 类。这仅适用于使用创建的类 React.createClass。你的意思是改为定义一个州属性吗？

我可以使用传统语法export default class Loginform extends React.Component { getInitialState() { return { name: '', password: '' }; }; }来处理它，但ES6语法是什么？

另一个小东西，我认为在传统语法var Loginform = React.createClass中是一个对象，所以其中的函数用逗号分隔，但是React.createClass类需要分号，我不明白它好。

Answer 1

您不需要在ES6类方法声明之间使用分号或逗号。

对于ES6类，不推荐使用getInitialState，而是赞成在构造函数中声明初始状态对象：

export default class Loginform extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };
}

Answer 2

ES6示例：state，defaultProps，propTypes

import React from 'react'
import ReactDom from 'react-dom';
export default class Item extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            check:false,
        };
        this.click=this.click.bind(this);
    }
    click(){
       this.setState({check:true});
    }
    render(){
        const text=this.state.check?'yes':'no';
        return(<div onClick={this.click}>{this.props.name} : <b>{text}</b></div>)
    }

}

Item.defaultProps={
    comment:"default comment",
};
Item.propTypes={
    name:React.PropTypes.string.isRequired,
};

Answer 3

如果我们使用类字段，则以下工作正在进行中。

state = {
      name: '',
      password: ''
}

这可以用来代替

constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };

类扩展React.Component不能在React中使用getInitialState

3 个答案: