作为 jsFiddle 的 ReactJS 代码有语法错误答案

【问题标题】：ReactJS code as jsFiddle has syntax errors作为 jsFiddle 的 ReactJS 代码有语法错误
【发布时间】：2019-11-30 03:11:06
【问题描述】：

关于 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

【问题讨论】：

标签： reactjs jsfiddle

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

无效的 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

【讨论】：

这个答案会更好，如果它解释了为使 JSX 有效所做的更改。