如何将长字符串拆分为多行字符串，但该字符串是javascript对象内部的值

Question

我正在为一个网站创建一个常见问题解答页面，我决定创建一个包含每个问题和答案的对象数组，然后通过该数组进行映射以使我的反应代码看起来更干净。

有些答案是段落，但我想将一些段落分成多个较小的段落。

我已经尝试过在反引号内使用 \n 以及在单引号和双引号内使用 \n ，但该段落不会在浏览器中分成多行。它是否与对象内部有关，这就是为什么它不会添加带有 \n 的新行？

这是我的常见问题解答对象：

export const faqData = [{
     question: "Can we make this product personalized?",
     answer: "Yes, all products can be personalized. Please visit our shop page for 
    all personalized options.\n You can view the shop page here."
},

这是我的组件：

import React from "react";
import Title from "./title/Title";
import Questions from "./faqs/Questions";
import { faqData } from "./utils/faqs";

const FAQ = () => {
  return (
    <div className="Div">
      <Title />
      {faqData.map(({ question, answer }) => (
        <Questions question={question} answer={answer} />
      ))}
    </div>
  );
};

export default FAQ;

Answer 1

遗憾的是，我们无法看到您如何在显示的代码中拆分 Questions 组件中的字符串。它应该是 string.split('\n') 上相当简单的映射。

在 Questions 组件的返回中，它应该类似于以下内容：

return (
   <div className="Questions">
      <h2>${props.question}</h2>
      {
         props.answer.split('\n').map((paragraph) => {
            return <p>{paragraph}</p>;
         }
      }
   </div>
)

这会将 answer 分解为由 \n 的，然后将其映射到单独的段落标签中。

Answer 2

默认情况下，HTML 会折叠空格。您可以使用 white-space CSS 属性更改此行为。在这种情况下，white-space: pre-line 可能就是您想要的。

Answer 3

对于显示多行而不是 \n 的不同解决方案，您可以将 answer 设置为 HTML 格式（以使用
）并使用 dangerouslySetInnerHTML （警告）

const faqData = [
  {
    question: "1 Can we make this product personalized?",
    answer: "Yes, all products can be personalized."
  },
  {
    question: "2 Can we make this product personalized?",
    answer:
      "Yes, all products can be personalized. Please visit our shop page for all personalized options.<br /> You can view the shop page here."
  }
];

const Title = () => <h1>FAQ</h1>;

const Questions = ({ question, answer }) => (
  <div>
    <h3>{question}</h3>
    <p dangerouslySetInnerHTML={{ __html: answer }} />
  </div>
);

完整演示

<一个href="https://codesandbox.io/s/angry-haibt-z4u9bg?fontsize=14&hidenavigation=1&theme=dark" rel="nofollow noreferrer">