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

要基于逗号分隔，将逗号转换为换行符，而最好保留逗号＆＃34; （不确定你是否想要将它们保留在输出中，但将其解释为这样）你可以尝试以下（适合我）：

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

Answer 3

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

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 4

尝试一下：

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

<>...</>用于JSX以了解其中的代码是HTML代码。

Answer 5

尝试使用来包装文本并映射以生成包装的jsx，

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

Answer 6

您可以通过 在行之间插入reduce：

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

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

8 个答案: