Question

我正在学习反应，我遇到了一些我学习的好例子，但似乎反应v15不再支持他们的语法

初始代码：

NewGameButton = React.createClass({
  render: function() {
    return React.DOM.div({
      className: 'tic-tac-toe--new-game-button',
      children: 'New game',
      onMouseUp: this.props.onClick
    });
  }
});

从我学到的东西开始，我试着将这段代码重写为es6：

class NewGameButton extends React.Component {
  render() {
    return (
      <div>
        .. ???
      </div>
    );
  }
}

现在我被卡住了，我发现类名模块已被弃用，我不知道如何重写它以使其正常工作

谢谢！

Answer 1

这部分：

return (
  <div>
    .. ???
  </div>
);

不是ES6，它是JSX，是React生态系统的可选但有用的补充。不幸的是，它需要一个额外的步骤来将类似HTML的语法转换为JS。

如果没有JSX，但使用ES6和当前版本的React，您的代码将如下所示：

class NewGameButton extends React.Component {
  render() {
    return React.createElement( // universal createElement method
      'div',   // tag name as the first argument instead of React.DOM.div method
      {
      className: 'tic-tac-toe--new-game-button',  // props as the second argument
      onMouseUp: this.props.onClick
      },
      'New game'  // children as the rest of arguments
    );
  }
};

工作演示：http://jsfiddle.net/69z2wepo/47252/

或stateless function组件方法：

const NewGameButton = props => React.createElement('div',{
        className: 'tic-tac-toe--new-game-button',
        onMouseUp: props.onClick }, 
        'New game' );

http://jsfiddle.net/69z2wepo/47254/

如果您要使用JSX语法（JS中的类似HTML的代码），则需要添加transpilation步骤，并且将为您生成上面的React.createElement()代码：

class NewGameButton extends React.Component {
  render() {
    <div className="tic-tac-toe--new-game-button" onClick={this.props.onClick}>
       New game
    </div>
  }
};

或者这个：

const NewGameButton = props => (
    <div className="tic-tac-toe--new-game-button" onClick={props.onClick}>
       New game
    </div>
);

Answer 2

我首先来看看官方的React文档https://facebook.github.io/react/docs/tutorial.html 他们提供了一些很好的例子，说明如何开始以及如何构建一切。

不确定代码的最终目标是什么......但是任何JSX标记都可以在渲染中返回。

类似于：

class NewGameButton extends React.Component {
  render() {
    return (
      <div>
        <input type="button" className="tic-tac-toe--new-game-button" onClick={this.props.onClick} />
        <ChildComponent />
      </div>
    );
  }
}

Answer 3

可能会有所帮助

class NewGameButton extends React.Component {
  render() {
    return (
      <div className="tic-tac-toe--new-game-button" onMouseUp={this.props.onClick}>
           New game
      </div>
    );
  }
}

但我真的建议你不要将<div>元素用作可点击区域。请改用<button>，因为它更适合语义。

旧语法不适用于es6

3 个答案: