时间戳

首页 > 解决方案 > 尝试在回调函数中呈现 JSX 后抛出语法错误“意外令牌，预期 }”

javascript - 尝试在回调函数中呈现 JSX 后抛出语法错误“意外令牌，预期 }”

问题描述

在下面的代码片段中，我使用lodash库map方法迭代对象的属性（在本例中为 PADS）。它接受对象和回调函数作为参数。

另一个要提到的是，我正在尝试将引导功能与反应子组件结合起来。

let count = 0;
let countCount = 0;
const drumPadItems = _.map(PADS, padElem => {
    count++;
    countCount++;

    if(countCount === 1){
      return (
        <div className="row">
        <DrumPad letter={padElem.letter} url={padElem.url}/>
      );
    }

    if(count > 3){
      count = 1;
      return (</div><div className="row"><DrumPad letter={padElem.letter} url={padElem.url}/>
      );
    }

    if(countCount === 9){
        return (
          <DrumPad letter={padElem.letter} url={padElem.url}/>
          </div>
        );
    }

    return <DrumPad letter={padElem.letter} url={padElem.url}/>;
});

当我运行应用程序时，我收到以下编译错误：

ERROR in ./src/components/drum_pad_list.js
Module build failed: SyntaxError: Unexpected token, expected } (76:19)
 if(count > 3){
  count = 1;
           ^
  return (</div><div className="row"><DrumPad letter={padElem.letter} url={padElem.url}/>
 );
}

编辑：

该PADS对象具有以下结构：

{
    q: {
        label: "Label1",
        letter: "Q",
        url: "https://..."
    },
    w: {
        label: "Label2",
        letter: "W",
        url: "https://..."
    }
    ...
}

所需的输出将类似于以下内容：

<div className="row">
  <DrumPad letter='Q' url='https://...'/>
  <DrumPad letter='W' url='https://...'/>
  <DrumPad letter='E' url='https://...'/>
</div>

什么是解决方案？

标签： javascriptreactjslodashjsx

解决方案

您的 JSX 不完整，因为没有关闭</div>。你有几个不完整的 JSX，你不能“连接”部分 JSX。这将解决第一个问题：

<div className="row">
  <DrumPad letter={padElem.letter} url={padElem.url} />
</div>

要映射 9 个元素，您可以这样做（key道具必须是唯一的，并且是 React 的簿记所必需的）：

// use capitalize for function name
const DrumPadItems = () => (
  <div className="row">
    {
      Object.values(PADS)
        .slice(0, 9)
        .map(padElem => <DrumPad 
          letter={padElem.letter} 
          url={padElem.url} 
          key={padElem.letter} />)
    }
  </div>
)

这将“呈现”以下列表：

<div className="row">
  <DrumPad />
  <DrumPad />
  ...
</div>
...

我建议使用对象解构并使 PADS 成为道具，然后您可以像这样使用它：

const DrumPadItems = ({PADS}) => (
  <div className="row">
    {
      Object.values(PADS)
        .slice(0, 9)
        .map(({letter, url}) => <DrumPad 
          letter={letter} 
          url={url} 
          key={letter} />)
    }
  </div>
)


// somewhere else
<div>
  <DrumPadItems PADS={this.state.PADS} />
  <OtherStuff />
</div>

PADS顺便说一句：假设这是一个数组，您不需要 lodash 。

推荐阅读