如何用新行和空格渲染 JSX (React.js)？

Question

下面的图片显示了我的控制台日志和 Google Chrome 中的 React 网站的并排比较。

Console log and Chrome website

请注意，控制台输出使用新行和缩进进行了很好的格式化。另一方面，网站上“生成的输出”下方的文本没有格式。所有的文字都聚集在一起。作为 Javascript 文字的字符串是这样的 -

'\n\n\npublic class FibonacciSequence {\n  \n    // recursive method\n    public static int fibonacciRecursion(int n) {\n        if (n == 0) return 0;\n        else if (n == 1) return 1;\n        else return fibonacciRecursion(n-1) + fibonacciRecursion(n-2);\n    }\n  \n    // iterative method\n    public static int fibonacciIterative(int n) {\n        int a = 0, b = 1, c;\n        if (n == 0) return a;\n        for (int i = 2; i <= n; i++)\n        {\n            c = a + b;\n            a = b;\n            b = c;\n        }\n        return b;\n    }\n  \n    public static void main (String[] args) {\n        int n = 10;\n        System.out.println("The Fibonacci number at position " + n + " is:");\n        System.out.println("Using recursion: " + fibonacciRecursion(n));\n        System.out.println("Using iteration: " + fibonacciIterative(n));\n    }\n  \n}'

新行和空格不会在网页上呈现。有什么办法可以在网页上呈现新的行和空格，以便像在控制台中一样格式化文本？

请注意，文本不是硬编码和自动生成的，因此我无法对空格和换行符进行硬编码。

现在，我在组件中返回以下内容 -

      <div>
        <h5>Prompt:</h5>
        {answer[0]}
        <br />
        <h5>Generated Output:</h5>
        {answer[1]}
      </div>

answer[1] 是包含生成的输出的变量。

谢谢你。

我在网上寻找解决方案。一种解决方案建议编写一个 JavaScript 函数，用“br />”标记替换“\n”，然后使用 DangerouslySetInnerHTML 呈现新字符串。但是，如果可能的话，我更喜欢不必使用 DangerouslySetInnerHTML 的解决方案。

Answer 1

您可以使用 pre 元素。它将保留如下新行

      <div>
        <h5>Prompt:</h5>
        <pre>{answer[0]}</pre>
        <br />
        <h5>Generated Output:</h5>
        <pre>{answer[1]}</pre>
      </div>