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-整个字符串只是一个固定的文本块。因此，我想做的是插入<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中似乎只是被忽略了。有没有办法使这项工作？我已经进行了危险的SetInnerHTML尝试，但无济于事。

关于如何进行这项工作的任何想法？

Answer 1

所以您需要危险地设置InnerHTML，正如FrV所指出的那样，答案是插入一个<br /> ...事实证明我错过了结尾的“ /”。哎呀希望这可以帮助遇到类似问题的人。

Answer 2

如果可能，请避免使用dangerouslySetInnerHTML。

另一种解决方案是将文本拆分成一个数组，然后为每个“换行符”渲染一个新的div。

当然，您可能需要为文本提供一个更好的key，因为可能会有重复的文本-尽管这本身就是一个单独的问题。

class Hello extends React.Component {
  constructor(props) {
  	super(props)
    this.state = {
      parsedText: [
        "Some text",
        "More text",
        "Keep on texting"
      ]
    }
  }
	
  render() {
    return <div>{this.state.parsedText.map(text => <div key={text}>{text}</div>)}</div>;
  }
}

ReactDOM.render(
  <Hello/>,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Answer 3

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

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

File(startingPath).walk()
        .filter { !it.isDirectory }
        .toList()

希望有帮助

Answer 4

如果您想在响应中打印一个<br/>标签，我想指出一个整洁的解决方法是使用<Trans> component from i18next。

如果您有这样的变量：

const customInviteMessageByCreator = "DEMO APPOINTMENT<br/>This room is to test your video room.";

您可以这样编写包装在Trans组件中的变量：

<Trans>{customInviteMessageByCreator}</Trans>

然后它将替换您可以在i18n.js文件中配置的列入白名单的html元素，如下所示：

transKeepBasicHtmlNodesFor: ["br", "strong", "b", "i"],

我没有读到这是可能的，但我很好奇它是否可行，因为i18next还会在translation.json中翻译我们的换行符，而且确实如此。

我认为，与到目前为止所发现的方法（例如在<br>上进行映射，在>之前可能会有一个/）相比，这是一种不那么可靠和可靠的方法。另外，您不仅可以将换行符列入白名单。当然，也可以选择危险地设置SetInnerHtml。

如何在React字符串中放置换行符？

4 个答案: