在下面的代码片段中,我使用 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>
对此有什么解决方案?
最佳答案
您的 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是一个数组。
关于javascript - 尝试在回调函数中呈现 JSX 后抛出语法错误 'Unexpected token, expected }',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53004202/