Babelifyは私のJSXを拒否され、そして、私は+反応し、ES6とステージ2とポリフィルプリセットでbabelify browserify使用プリセット

Question

を '反応' を使用しています：

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 

import RecordRow from './RecordRow'; 

const RecordSection = ({section, index}) => { 

    return (
    { section.useHeading && 
    <tr> 
     <td colspan="4" key={'sectionHeading' + index}> 
     {section.heading} 
     </td> 
    </tr> 
    } 
    {section.rows.map((row, i) => 
     <RecordRow 
     key={'sectionRow' + index + ',' + i} 
     sectionIndex={index} 
     rowIndex={i} /> 
    )} 
); 
} 

：このJavaScriptコードで

browserify -t [babelify --presets ['latest' 'react' 'babel-polyfill' 'stage-2'] ] client-src/root.js -o lib/root.js 

を

"。" JSXブレース内：

SyntaxError: /blah/RecordSection.js: Unexpected token, expected , (10:13) 
    8 | 
    9 | return (
    > 10 |  { section.useHeading && 
     |   ^
    11 |  <tr> 
    12 |  <td colspan="4" key={'sectionHeading' + index}> 
    13 |   {section.heading} 
    at Parser.pp$5.raise (/blah/node_modules/babylon/lib/index.js:4246:13) 
    at Parser.pp.unexpected (/blah/node_modules/babylon/lib/index.js:1627:8) 

なぜですか？

Answer 1

JSXではルートに複数の項目が存在しないことがわかりました。関数から配列を返すことはできますが、レンダリングに渡されるものは単一のルートを持つ必要があります。 How do I render sibling elements without wrapping them in a parent tag?