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

时间:2019-04-05 17:58:33

标签: javascript reactjs

我有一个文本文件,该文件以字符串形式读取,然后像这样插入到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字符或&nbsp;,以使这些中断在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尝试,但无济于事。

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

如果可能,请避免使用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>

答案 2 :(得分:0)

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

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

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

希望有帮助

答案 3 :(得分:0)

如果您想在响应中打印一个<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。