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用作道具，然后可以像这样使用它：

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。

Answer 2

1）您缺少</div>

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

2）<div>

过多

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

3）您缺少</div>

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

JSX希望将整个返回标记放入一个return(<div>...</div>);之类的容器中

我相信，如果您向我们解释，还有另一种方式可以做您想要的事情

尝试在回调函数中呈现JSX后引发语法错误“意外的令牌，预期的}”

2 个答案: