Question

使用browserify + babelify with react和ES6以及stage-2和polyfill预设：

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不允许在根目录下使用多个项目。您可以从函数返回数组，但传递给render的东西必须有一个根。见How do I render sibling elements without wrapping them in a parent tag?

Babelify拒绝我的JSX，我正在使用'react'预设

1 个答案: