如何在 React.createClass 中使用箭头函数

Question

我希望我的小项目中尽可能地使用ES6（ES2015）。现在我想要在React中使用箭头函数。

// What I want
let Text = React.createClass({
    componentDidMount: () => {
        setInterval(this.updateCurrentTime, 1000);
    }
}

// What I have
let Paragraph = React.createClass({
    render: () => (<div className="MySuperTable"><Text name="Dodo" startDate={(new Date()).toString()} /></div>)
});

let Text = React.createClass({
    getInitialState: function () {
        return {
            currentTime: (new Date()).toString()
        }
    },
    componentDidMount: function () {
        setInterval(this.updateCurrentTime, 1000);
    },
    updateCurrentTime: function () {
        this.setState({
            currentTime: (new Date()).toString()
        });
    },
    render: function () {
        return (
            <div>
                <span>Hello my name is {this.props.name}</span>
                <span>And I was born on {this.props.startDate}</span>
                <span>And I now it's {this.state.currentTime}</span>
            </div>
        );
    }
});

ReactDOM.render(
    <Paragraph/>,
    document.getElementById('container')
);

1. 我需要做什么才能让它工作？
2. 据我所知，this将是传递给createClass的对象本身，这正确吗？
3. 我该如何将它绑定到Text实例上？

提前致谢。

- Rantiev

---

可能是箭头函数与函数声明/表达式：它们是否等效/可交换？的重复问题。 - Felix Kling

你不能简单地用箭头函数替换普通函数。 - Felix Kling

Answer 1

您可以像这样使用ES2015更改您的代码。

class Text extends React.Component {
  constructor() {
    super();
    this.state = { currentTime: (new Date()).toString() };
  }

  componentDidMount() {
    setInterval(() => this.updateCurrentTime(), 1000);
  }

  updateCurrentTime() {
    this.setState({
      currentTime: (new Date()).toString()
    });
  }

  render() {
    return <div>
      <span>Hello my name is { this.props.name }</span>
      <span>And i was born { this.props.startDate }</span>
      <span>And i now it's { this.state.currentTime }</span>
    </div>  
  }
};

let Paragraph = () => {
  return <div className="MySuperTable">
    <Text name="Dodo" startDate={ (new Date()).toString() } />
  </div>
};

示例

React - 可复用组件

- Oleksandr T.

Answer 2

正如你所说，你希望尽可能使用ES6。因此，你可以使用“React.Component”代替“createClass”，你可以在这里找到更多信息。

然后，为了使用箭头函数，你可以使用Babel，preset-2015。

- Hareesh

---

谢谢，我刚刚标记了正确答案，但你的答案也很好。 - Rantiev