Babelify被拒絕我的JSX，並且我使用的「反應」預設

Question

使用browserify + babelify反應並ES6和階段-2和填充工具預設：

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

利用該JavaScript代碼：

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

我在「。」上遇到錯誤。裏面的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?