javascript - 如何在 React 字符串中添加换行符？

Question

我有一个文本文件，我将其作为字符串读取，然后像这样插入到 DOM 中:

//the state gets set with the contents of a text file that has proper indentation
  state = {
    parsedText: null
  }
//in the render function, this is how the text comes in
<p>{this.state.parsedText}</p>

当我迭代字符代码时，我可以看到当我 console.log 文件时“输入”代码(即 13)似乎可以工作(缩进看起来正确)。不幸的是，这些字符代码无法转换为 HTML - 整个字符串只是作为一个完整的文本 block 出现。所以，我想做的是插入 <br>标签或 \n字符或  为了使中断在 HTML 中起作用。

看起来是这样的:

rawFile.onreadystatechange = () => {
    if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
            let allText = rawFile.responseText;
            for (let i = 0; i < allText.length; i++) {
              let uni = allText.charCodeAt(i)
              if (uni === 13) {
                console.log('enter!!')
                allText = allText.substring(0, i) + "\n" + allText.substring(i + 1, allText.length - 1)
              }
            }
            console.log("allText: ", allText);
            console.log(typeof allText)
            this.setState({
                parsedText: allText
            });
        }
    }
};
rawFile.send(null);

}

\n插入显示在文本字符串中，但在 DOM 中似乎被忽略了。有办法让这项工作发挥作用吗？我尝试过angerlySetInnerHTML，但没有任何作用。

关于如何实现这项工作有什么想法吗？

Answer 1

有同样的问题。刚刚解决了。

您所需要做的就是将字符串保存为数组。像这样:

let text = "this is text without break down \n this won't work but will be one line"

let text = ["this is text with breakdown",
 <br/>,
 "this is the second line"];

您还可以编写实用函数来为您执行此操作:

const addLineBreak = (str: string) =>
  str.split('\n').map((subStr) => {
    return (
      <>
        {subStr}
        <br />
      </>
    );
  });

并使用它:

<p>{addLineBreak("Hello \n World"}</p>

Here's an example on StackBlitz供您引用。

希望有帮助