使字符串中的<br />在react中起作用

Question

这是一些ajax调用返回<br />的数据，但我发现这很难处理。

这是我现在得到的，但是根本无法工作。正确地分割了字符串，而react给了我几个<span></span>标签而没有适当的<br />换行符。

const breakLine = text => {
    const regex = /<br\s*[\/]?>/gi

    return text.split(regex).map(
        line => line.match(regex) ? React.createElement('br') : line
    )
}

const Text = ({ content }) => <p>
    { breakLine(content) }
<p>

// Usage
<Text content="Here are some <br /> Lines <br> to break!" />

Answer 1

当您使用正则表达式拆分时，您的数组将不包含标签<br />，因为拆分会删除分隔符。

let splitText = text.split(regext);
// ["Here are some ", " Lines ", " to break!"]

这使得你的三元总是命中 false 子句并且只返回实际的行。

可以在这个答案中找到一种方法

工作示例正则表达式由 @JonMayer 提供

function breakLine(text) {
    var br = React.createElement('br');
    var regex = /(<br \/>)/g;
    return text.split(regex).map(function(line, index) {
        return line.match(regex) ? <br key={"key_" + index} /> : line;
    });
}

var Text = React.createClass({
    render: function() {
        return <div>{ breakLine(this.props.content) }</div>;
    }
});

React.render(<Text content="Here are some <br /> Lines <br /> to break!" />, document.body);