ReactJS代码，因为jsFiddle存在语法错误

Question

关于jsFiddle的React我有些不了解。根据我的最佳猜测，我将组件定义为

class MakeWorkers extends React.Component {

render() {
    return (<ul>this.props.people.map((person) => {
        const { name, whatCanDo } = person;
            return (<li key={name}>My name is {name}, I can do {whatCanDo}</li>);    
    })</ul>);
  }
}

const people = [
  { name: 'Josh', whatCanDo: 'painting' },
  { name: 'Lay', whatCanDo: 'security' },
  { name: 'Ralph', whatCanDo: 'cleaning' }
];

ReactDOM.render(
  <MakeWorkers people={people}/>,
  document.getElementById('container')
);

这对我来说似乎是有效的JSX语法，但是当我将它放在jsFiddle中的Fiddle中时，它不起作用，并且render函数中存在许多语法错误。我不确定在jsFiddle中获得这个简单的映射和JSX示例时缺少什么。主要错误消息之一是jsFiddle声称存在一个未终止的正则表达式。有些东西很混乱。也许我没有包括正确的库？完整的小提琴是Here

Answer 1

无效的JSX，这是有效的：

class MakeWorkers extends React.Component {
  render() {
    return (
      <ul>
        {this.props.people.map(person => {
          const { name, whatCanDo } = person;
          return (
            <li key={name}>
              My name is {name}, I can do {whatCanDo}
            </li>
          );
        })}
      </ul>
    );
  }
}

[this.props.people.map是javascript表达式需要在{}中

您可以找到更多文档here

Answer 2

似乎您忘了用<ul>将内容包装在{}中。您可以在此处找到编辑后的代码：https://jsfiddle.net/5e9ayd12/

编辑抱怨同样的事情。即使样板代码也具有相同的语法错误。所以我睡觉是个虫子。https://jsfiddle.net/boilerplate/react-jsx