Старый синтаксис не работает с ES6

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> 
    ); 
    } 
} 

теперь я застрял, я обнаружил, что модуль имя класса является устаревшим и я не знаю, как переписать это, чтобы сделать i т работы

спасибо!

Answer 1

Я бы начал с официальной документации по реактированию 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 2

Этой части:

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 (HTML-код, как в JS) Вы должны были бы добавить 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 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>, потому что это более правильно для семантики.