在JSX中将字符串中的逗号分隔为<br />

Question

我有一个包含逗号的字符串(地址),我想在一些JSX中划分换行符.执行以下操作仅输出<br />字符串:

{address.split(',').join('<br />')}

我怎样才能做我需要做的事情,最好保留逗号？

Answer 1

你可以尝试在p标签中包装每个地址,不要使用<br />,

var Component = React.createClass({
    render: function() {
        var addresses = this.props.addresses.split(',').map(function (address, index) {
            return <p key={index}>{ address }</p>; 
        });

        return <div className="addresses">{addresses}</div>;
    }
});

Example

Answer 2

要基于逗号定界，将逗号转换为换行符，同时“最好保留逗号”（不确定您是要在输出中保留逗号，还是这样解释），可以尝试以下操作（对我有用） ：

let newAddress = address.split(',').map(line => <span>{line},<br/></span>);
// span tag here only in order for JSX to accept br tag

Answer 3

您可以简单地<br/>使用以下命令在行之间插入reduce()：

{address.split(',').reduce((all, cur) => [
    ...all,
    <br/>,
    cur
])}