Verständnis Reagieren einfaches Beispiel

Question

Im basic example on the React frontpage gibt es:

class HelloMessage extends React.Component { 
    render() { 
    return <div>Hello {this.props.name}</div>; 
    } 
} 

ReactDOM.render(<HelloMessage name="Jane" />, mountNode); 

Wenn ich etwas ähnliches in meinem Setup erhalte ich:

ERROR in ./src/index.jsx 
Module build failed: SyntaxError: Unexpected token, expected } (54:11) 

    52 | 
    53 | class EisTable extends React.Component { 
> 54 | render() { 
    |   ^
    55 |  return <div>Hello </div>; 
    56 | } 
    57 | } 

Welche ja nicht sens für mich. Wahrscheinlich ist es eine Art ES16-Trickserei, die ich nicht kenne, aber für eine bequeme JS macht diese Syntax keinen Sinn. Was heißt das render(){} und was brauche ich, damit es funktioniert?

Answer 1

Wie Sie vermutet haben, ist dies eine Syntax in ES6 (auch bekannt als ES2015), genannt shorthand methods.

Diese

{ 
    render() {} 
} 

ist eine Abkürzung Syntax für diesen

{ 
    render: function() {} 
} 

Sie entweder den langen Weg (für Kompatibilität mit älteren JS-Spezifikationen) oder verwenden Sie eine neuere JS-Engine schreiben. Hier finden Sie eine Kompatibilitätstabelle für dieses spezifische Sprachfeature:

Wenn Sie babel verwenden, stellen Sie sicher, dass das es2015 Preset enthalten ist.

Answer 2

Sie müssen wahrscheinlich die Fähigkeit konfigurieren, ES6 in Ihrer Umgebung zu transponieren.

Um das zu tun, empfehlen sie Babel und Webpack.

render() Funktion ist Teil des Lebenszyklus in einer Reaktionskomponente, es erwartet shadowDOM zurückgegeben werden, wenn im Web.

https://facebook.github.io/react/docs/react-component.html