Question

我试图仅在变量不为null时才显示变量旁边的箭头。有问题的变量是flight.c_tof。

render() {
    const items = this.state.flights.map((flight) =>
        <tr key={flight.uid}>
            <td>{flight.c_tof == null ? null : flight.c_tof + <span className="icon-arrow-right icon-small"></span>}</td>
        </tr>
    )

    return ...{items}...
}

这会输出类似：LPPD[object Object]

的内容

如果我删除flight.c_tof +，则会显示该箭头。我如何连接该变量？

Answer 1

将您的td更改为

     <td>{flight.c_tof === null ? null : <span>{flight.c_tof}  <span className="icon-arrow-right icon-small"> </span></span>}</td>

您只能输出一个元素作为条件的结果。因此，当您删除flight.c_tof +时，输出只是带有图标的范围，它显示正常。但是当你添加flight.c_tof +时，它不是一个有效的html元素，而是显示为一个javascript对象。

在@ DaveNewton的评论后编辑：您可以创建类似

的组件

const ArrowField=(props)=>{
  return (<div>
    {props.data}
    <span className="icon-arrow-right icon-small"></span>
  </div>);
}

然后像

一样使用它

<td>{flight.c_tof === null ? null : <ArrowField data={flight.c_tof} />}</td>

将变量连接到HTML标记

1 个答案: