javascript - 在 react 中按换行符拆分字符串

Question

我有一个 order.expeditionPlaces 的 json 字符串，其格式如下:

"expeditionPlaces": "Place1, Place2, Place3"

我能够拆分数据，但我无法让字符串进入新行，因为 html 标签在 react 中被转义了

{order.expeditionPlaces ? order.expeditionPlaces.split(",").join("<br>") : ""}

应该显示:

Place1

Place2

我如何重写它以便字符串拆分成新行？

我现在的代码是

if (this.state.possibleOrders && this.state.possibleOrders.length > 0) {
        this.state.possibleOrders.forEach((order, index) => {
            possibleOrders.push(<tr key={index}>
                <td>{order.orderId}</td>
                <td>{order.orderState}</td>
                <td>{order.expeditionPlaces ? order.expeditionPlaces.split(",").join("<br>") : ""}</td>
                <td>{order.sortingBufferPlaces}</td>
            </tr>);
        });
    }

Answer 1

在你的情况下，JSX 不解释 "<br />"作为 HTML tag , 但作为 string , 所以

<td>
{
  order.expeditionPlaces 
    ? order.expeditionPlaces.split(",").join("<br>") 
    : ""
}
</td>

应该是

<td>
{
  order.expeditionPlaces 
    ? order.expeditionPlaces.split(",").map(place => <p> {place} </p>) 
    : ""
}
</td>