在换文

Question

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

"expeditionPlaces": "Place1, Place2, Place3"

我能够分割数据但是我无法将字符串转到新行，因为html标签在反应中被转义

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

应该是

{{1}}

Answer 2

当您需要react组件时，您的实际代码会返回一个字符串：）

此代码应该有效（未经过测试，可能需要一些调整）

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 || []).split(",").map(function(place, i) {
                    return <p key={i}>place</p>
                })}
            </td>
            <td>{order.sortingBufferPlaces}</td>
        </tr>);
    });
}

- 编辑 替换

<p>

满足任何需要

<div key={i}>place<br/></div> 

也会起作用