我有一个文本文件,该文件以字符串形式读取,然后像这样插入到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尝试,但无济于事。
关于如何进行这项工作的任何想法?
答案 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。