Question

我正在尝试使用两个组件，但是我收到了这个错误：

模块构建失败：SyntaxError：意外的令牌（72：7）

import AlertListItem from '~/components/Dashboard/AlertListItem'
import AlertItem from '~/components/Dashboard/AlertItem'
    let items
    if (result) {
      items = result.map((item, index) =>
       return(
        <div>
        <AlertListItem key={item.id} item={item} onPopup={this._onSelect} index={index} />
        <AlertItem id={item.id} item={item} onClose={this._onDeselect} />
        </div>  
      )
    )

任何解决方案？

Answer 1

使用简明箭头功能（无{}）时，您不能使用return关键字;简洁箭头函数的主体是单个表达式，但return是一个语句。（您还有一个)而不是}关闭if块。）

所以：

import AlertListItem from '~/components/Dashboard/AlertListItem'
import AlertItem from '~/components/Dashboard/AlertItem'

    let items
    if (result) {
      items = result.map((item, index) =>
        <div>
        <AlertListItem key={item.id} item={item} onPopup={this._onSelect} index={index} />
        <AlertItem id={item.id} item={item} onClose={this._onDeselect} />
        </div>  
      )
    }

示例（这也在＆＃34; Side Note＆＃34;中提到了更改）：

＆＃13;

// Setup:
const AlertListItem = props =>
  <div>{props.children}</div>;

const AlertItem = props =>
  <div>Item #{props.id}</div>;

const result = [
  {id: 1}, {id: 2}, {id: 3}
];

// Your corrected code (with the event handlers removed,
// don't need them for the example)
let items;
if (result) {
  items = result.map((item, index) =>
    <div key={item.id}>
    <AlertListItem item={item} index={index} />
    <AlertItem id={item.id} item={item} />
    </div>  
  )
}

// Show it
ReactDOM.render(
  <div>{items}</div>,
  document.getElementById("react")
);

＆＃13;

<div id="react"></div>
<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>

＆＃13;

为了完整起见，这是一个简单的简明箭头功能示例：

array.sort((a, b) => a - b);

请注意正文只是表达式a - b。

等同的冗长的一个：

array.sort((a, b) => { return a - b; });

由于我们使用了{...}，因此它是一个包含语句的完整功能正文块，因此我们使用return来返回值。

附注：您需要将key放在div上，而不是AlertListItem;如果您使用非缩小库，它会警告您key错误。我在上面的示例中移动了key。

Answer 2

您错过了map的大括号：

 items = result.map((item, index) => {...}

映射返回多个组件

2 个答案: