在 JSX 中将字符串中的逗号拆分为

Question

我有一个包含逗号的字符串（地址），我希望将其分隔为某些 JSX 中的换行符。执行以下操作仅将   输出为字符串：

{address.split(',').join(' ')}

我该如何做我需要做的事情，最好保留逗号？

Answer 1

您可以尝试将每个地址包装在 p 标记中，不要使用  、

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

有时您想使用换行符而不是段落。在这种情况下，您可以这样做：

function convertNewLines(_text) {
    let lines = _text.split('\n');
    let elements = [];
    for (let i=0; i<lines.length; i++) {
        elements.push(lines[i]);
        if (i < lines.length-1) {
            elements.push(<br key={i}/>);
        }
    }
    return elements;
}

这避免了使用危险设置内部 HTML。

（FWIW 我通过使用 Babel REPL 解决了这个问题。）

Answer 3

要基于逗号分隔，将逗号变成换行符，而 "preferably retaining the commas"（不确定您的意思是要将它们保留在输出中，但可以这样解释）您可以尝试以下操作（对我有用）：

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

Answer 4

尝试使用  包装文本和地图以生成包装的 jsx，

{ address.split(',').map((addr, idx) => (<span key={idx}>{addr}<br/><span>) }

Answer 5

您可以通过 reduce:

在两行之间简单地插入  

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

Answer 6

试试这个：

{ address.split( ',' ).map( ( item ) => <> { item } <br /> </>) }

<>...</>用于JSX理解里面的代码是HTML代码。

Answer 7

我会用 React.Fragment 代替 span

import { Fragment } from 'react'

const LineBreaks = ({ text = "", separator = ","}) => (
  <p>
    {text
      .split(separator)
      .map((text, index) => (
        <Fragment key={text}>
          {!!index && <br />}
          {text}
        </Fragment>
      ))}
  </p>
)

Answer 8

虽然这不会直接导致它被   分隔，但我找到了一个更简单的解决方案，对我们有用。当然，这取决于应用于 <div> 容器的任何填充或其他 CSS。

  {address.split(",").map((line) => (
    <div>{line}</div>
  ))}

你也可以这样做：

  {address.split(",").map((line) => (
    <span style={{display: "block"}}>{line}</span>
  ))}

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

Split commas in string to <br /> in JSX

javascript

reactjs

react-jsx