在 React 中返回数组时如何添加换行符？答案

【问题标题】：How to add newline when I return array in React?在 React 中返回数组时如何添加换行符？
【发布时间】：2019-10-08 10:32:08
【问题描述】：

我需要打印一个字符串“虚拟数据”。

所以我创建了一个函数，它返回包含字符串“虚拟数据”的数组。我能够打印“dummy data dummy data dummy data ...”。但是，我想在每个字符串中添加换行符。然后它看起来像，

...
虚拟数据
虚拟数据
虚拟数据
...

我该怎么做？

Sample image of code and result

class Content extends Component {
  dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push("dummy data");
    }
    return rows;
  };

  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop()}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

【问题讨论】：

您需要将每一行包装到块级元素，或者您可以使用换行符

标签： javascript html arrays reactjs create-react-app

【解决方案1】：

将字符串包装在<div> 中，然后将其推送到数组中。

dummyDataLoop = () => {
  var rows = [];
  for (let i = 0; i < 10; i++) {
    rows.push(<div>dummy data</div>);
  }
  return rows;
};

另一种方法是使用map() 和扩展运算符来缩短代码。

dummyDataLoop = () => [...Array(10)].map(x => <div>dummy data</div>)

【讨论】：

@MasonYMKoh 很高兴为您提供帮助。另请参阅第二个做同样的事情。实际上创建一个空数组并将元素推送到它并不被认为是干净的代码。

【解决方案2】：

您可以将dummy data 与div 标签包装起来，然后再将其推送到这样的数组中

<div>dummy data</div>

您可以将代码更改为，

dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push(<div>dummy data</div>);   // notice change in this line
    }
    return rows;
};

  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop()}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

【讨论】：

【解决方案3】：

这很简单。使用map 来迭代数组，然后将其包装在

中

标签。

class Content extends Component {
  dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push("dummy data");
    }
    return rows;
  };
  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop().map((item, index) => <p key={index}>{item}</p>)}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

【讨论】：