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 时，它不起作用，并且渲染函数中存在许多语法错误。我不确定在获取这个在 jsFiddle 中工作的简单映射和 JSX 示例时缺少什么。主要错误消息之一是 jsFiddle 声称存在未终止的正则表达式。有些事情很混乱。也许我没有包括正确的图书馆？完整的 Fiddle 是 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

ReactJS 代码作为 jsFiddle 有语法错误

ReactJS code as jsFiddle has syntax errors

jsfiddle

reactjs