Babelify 내 JSX을 거부, 나는이 (가) + 반응 ES6 무대-2 및 polyfill 사전 설정 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} /> 
    )} 
); 
} 

이 자바 스크립트 코드로

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?