如果内部有脂肪箭头功能

你刚刚忘记了 在…内 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>

如果jsx不是fat arrow函数的整个主体,则需要显式返回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