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>
      });
    });

＆＃13;

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')
);

＆＃13;

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

＆＃13;

无法将数组映射到JSX - 意外的令牌

1 个答案: