如何在React Redux中呈现列表项？

Question

我是学习React + Redux的初学者。我正在构建我的第一个List / ListItem并遇到错误。这是我的组件：

import React from 'react';
import PropTypes from 'prop-types';
import {Link} from 'react-router';

const CatList = ({cats}) => {
  return (
    {cats.map(cat => (
      <li key={cat.id}>
        {cat.name}
      </li>
    ))}
  );
};

CatList.propTypes = {
  cats: PropTypes.array.isRequired
};

export default CatList;

我得到的错误：

Error in ./src/components/cats/CatList.js
Syntax error: Unexpected token, expected , (7:9)

   5 | const CatList = ({cats}) => {
   6 |   return (
>  7 |     {cats.map(cat => (
     |          ^
   8 |       <li key={cat.id}>
   9 |         {cat.name}
  10 |       </li>

Error
 @ ./src/components/cats/CatsPage.js 20:15-35

Answer 1

React组件应该返回单个元素。请尝试这个（只需将你的标记包装在另外的div中）：

const CatList = ({cats}) => {
  return (
    <div>
       {cats.map(cat => (
         <li key={cat.id}>
           {cat.name}
         </li>
       ))}
    </div>
  );
};