将数组映射到 JSX 时遇到问题 - 意外的令牌

Question

我在使用 ReactJS 和 JSX 将 employees 数组映射到新数组时遇到问题。 我的返回方法出了点问题。注意：React 和 ES6 的极限初学者。

如何让它工作？

这是我的代码：[live version on jsfiddle]

class EmployeesTable extends React.Component {
  render() {

const employees = [{
  name: 'John',
  age: 34
}, {
  name: 'Mary',
  age: 23
}, {
  name: 'Tom',
  age: 100
}];

    return ({
      employees.map(employee => { <ul>
          <li> {
            employee.name
          } </li> </ul>
      });
    });

  }
};

class Directory extends React.Component {
  render() {
    return ( < section >
      < h1 > Hello World < /h1> < EmployeesTable / >
      < /section>
    )
  }
}
ReactDOM.render( <Directory / > , document.getElementById('directory'));

Answer 1

   return  (<div>
      {employees.map(employee => ( 
         <ul>
          <li> {employee.name  } </li> 
        </ul>
       )
    )}
    </div>
   )

不是

   return ({
      employees.map(employee => { <ul>
          <li> {
            employee.name
          } </li> </ul>
      });
    });

class EmployeesTable extends React.Component {
  render() {
    let employees = [{
  name: 'John',
  age: 34
}, {
  name: 'Mary',
  age: 23
}, {
  name: 'Tom',
  age: 100
}];

  	 employees = employees.map((employee, index) => (
    	<ul key={index}><li >{ employee.name }</li><li>{employee.age}</li></ul>
    ));
    return (<div>{employees}</div>);
  
  
	}
};

class Directory extends React.Component {
  render() {
    return (
    	<section>
        <h1>Hello World</h1>
        <EmployeesTable />
      </section>
    )
  }
}


ReactDOM.render(
	<Directory  /> , 
  document.getElementById('directory')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<aside id="directory"></aside>