Alte Syntax funktioniert nicht mit es6

Question

Ich lerne reagieren und stieß ich auf ein paar schöne Beispiele aus ich lerne, aber es scheint, ihre Syntax wird nicht mehr unterstützt durch reagieren v15

Anfangscode:

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

von dem, was ich gelernt hatte, habe ich versucht, dieses Stück Code neu schreiben ES6:

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

jetzt ich bin stecken, finde ich, dass Klassennamen Modul aus veraltet ist, und ich habe keine Ahnung, wie um dies neu zu schreiben, um i t Arbeit

danke!

Answer 1

Ich würde beginnen, indem Sie durch die offizielle React Dokumentation gehen https://facebook.github.io/react/docs/tutorial.html Sie geben einige gute Beispiele, wie man beginnt und wie alles strukturiert werden sollte.

Nicht sicher, was das Endziel Ihres Codes ist .... aber jedes JSX-Markup kann in render zurückgegeben werden.

So etwas wie:

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

Dieser Teil:

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

ist nicht ES6, es ist JSX, eine optionale, aber sinnvolle Ergänzung für das Ökosystem reagieren. Leider erfordert es einen zusätzlichen Schritt, um die HTML-artige Syntax nach JS zu übertragen.

Ohne JSX, aber unter Verwendung von ES6 und aktuelle Version des Codes reagieren würde wie folgt aussehen:

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

Arbeits Demo: http://jsfiddle.net/69z2wepo/47252/

oder die stateless function Komponentenansatz:

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

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

Wenn Sie die JSX Syntax (HTML-Code wie in JS) müssen Sie verwenden sollten einen transpilation Schritt und der React.createElement() Code hinzufügen oben für Sie daraus erzeugt werden würde:

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

oder dies:

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

Answer 3

kann sein, dass

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

helfen würde, aber ich schlage vor, Sie nicht wirklich <div> Elemente als anklickbare Bereiche zu verwenden. Verwenden Sie stattdessen <button>, weil es für die Semantik besser geeignet ist.