javascript - 尝试在回调函数中呈现 JSX 后抛出语法错误 'Unexpected token, expected }'

Question

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

另一个值得一提的是，我正在尝试将 Bootstrap 功能与 React 子组件结合起来。

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>

对此有什么解决方案？

Answer 1

您的 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 成为一个 Prop ，然后你就可以像这样使用它了:

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是一个数组。