Question

我不知道怎么写这个。我在胖箭头内有这个三元运算符。但如果无法执行代码。我没有使用browserify或在控制台上出错，但它只是不打印标题。

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

我输错了什么？

<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不是胖箭头函数的整个主体，则需要显式返回。

您的代码已修复：

<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>

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

如果里面有胖箭头功能

2 个答案:

解决方案