如果内部脂肪箭头功能

Question

我不知道怎么写这个。我在胖箭头里面有这个三元运算符。但如果无法执行代码。我在浏览器化或控制台上没有收到任何错误，但它只是不打印标题。

如果我放弃{}和三元运算符，它可以正常工作。

我打错了什么？

<Row className="grid-header">
{
this.props.columnsInfo.map((info) => {
width = (info.colWidth) ? "className={info.colWidth}" : "xs={this.calculateColumnSize()}";
<Col style={{ paddingTop: 10, paddingLeft: 10 }} key={info.header} width>{info.header}</Col>
})
}
</Row>

Answer 1

你只是忘记了map()里面的回报。
在map()中，您返回每次迭代undefined，这将被忽略，因为没有要渲染的想法。
当你用"{}">使用fat arrow function时，你必须显式返回((x) => {return x + x}(一个变量，但没有隐式返回((x) => x + x(。

溶液

<Row className="grid-header">
{
this.props.columnsInfo.map(info => {
const width = info.colWidth 
? "className={info.colWidth}"
: "xs={this.calculateColumnSize()}";
return <Col style={{ paddingTop: 10, paddingLeft: 10 }} key={info.header} width>{info.header}</Col>
})
}
</Row>

Answer 2

如果 jsx 不是胖箭头函数的整个主体，则需要显式返回 jsx。

您的代码已修复：

<Row className="grid-header">
{this.props.columnsInfo.map(info => {
const width = (info.colWidth)? "className={info.colWidth}" : "xs={this.calculateColumnSize()}";
return (<Col style={{paddingTop:10,paddingLeft:10}} key={info.header} width>{info.header}</Col>);
})}
</Row>

删除大括号和三元运算符时它起作用的原因是，当您为正文执行没有大括号的胖箭头函数时，它会隐式返回 body，该主体必须只是一个语句。由于您要在函数体中添加第二个语句(三元线(，因此需要添加正文大括号，现在有正文大括号，因此您需要实际编写return关键字，因为它不再隐式用于您的 jsx 行。