Réagir suffisent pas à rendre div dans balise li

Question

ne peut pas rendre ce code, se SyntaxError: [stdin]: 4: 1: retrait inattendu

@Statement = React.createClass 
    render: -> 
    React.DOM.li 
     React.DOM.div 
     className: 'statement' 
     @props.statement.body 

Si je commente que le numéro de ligne , tout fonctionne bien.

Pourquoi c'est arrivé? Je ne peux rien comprendre ...

Answer 1

Le code ne sera pas compilé car vous essayez de passer un élément de réaction comme seul argument à React.DOM.li, alors qu'il attend d'abord un objet options, puis un objet enfant.

@Statement = React.createClass 
    render: -> 
    React.DOM.li {}, 
     React.DOM.div 
     className: 'statement' 
     @props.statement.body 

Vous devez passer le hachage vide à l'élément li. Vous pouvez passer null au lieu de {}, ils seront tous deux pris comme un objet vide/attr par React.

Vous pouvez également utiliser l'affectation déstructurant de coffeescript pour faire le look de code réagir plus propre:

{li, div} = React.DOM 

@Statement = React.createClass 
    render: -> 
    li {}, 
     div 
     className: 'statement' 
     @props.statement.body 

L'un des rares groupes à travailler avec coffeescript et React sans JSX sont Arkency, jetez un oeil à their resources pour plus de conseils.

---

Edit: au sujet de votre commentaire:

Il est probablement un cas de retrait - coffeescript renvoie implicitement le dernier résultat de l'expression dans une fonction ou d'un bloc.

Si vous voulez rendre la deuxième travée nichée dans la première:

render: -> 
    React.DOM.span null, 
    '123' 
    React.DOM.span null, 
     'sdfdfg' 

Et si vous cherchez à rendre les deux comme frères et sœurs, vous aurez besoin de les envelopper dans un élément parent que vous pouvez seulement retourner un composant de React de méthode render:

render: -> 
    React.DOM.div null, 
    React.DOM.span null, 
     '123' 
    React.DOM.span null, 
     'sdfdfg'