使用Facebook的React
库。
在一个设置页面中,我有一个多行文本框textarea
,用户可以输入多行文本(例如地址)。
<textarea value={address} />
当我试图显示地址,就像{address}
这样,它不会展示换行符,而是全在一行上。
<p>{address}</p>
你有什么解决这个问题的想法吗?
使用Facebook的React
库。
在一个设置页面中,我有一个多行文本框textarea
,用户可以输入多行文本(例如地址)。
<textarea value={address} />
当我试图显示地址,就像{address}
这样,它不会展示换行符,而是全在一行上。
<p>{address}</p>
你有什么解决这个问题的想法吗?
没有使用JS的必要。您可以轻松地告诉浏览器如何处理换行符,只需使用white-space CSS属性即可:
white-space: pre-line;
pre-line
空格序列被折叠。在换行符处、
<br>
处以及必要时进行分行。
查看此演示:
<style>
#p_wrap {
white-space: pre-line;
}
</style>
<textarea id="textarea"></textarea>
<p id="p_standard"></p>
<hr>
<p id="p_wrap"></p>
<script>
textarea.addEventListener('keypress', function(e) {
p_standard.textContent = e.target.value
p_wrap.textContent = e.target.value
})
</script>
可以预料到,你需要将换行符(\n)转换为HTML换行符<br />
一篇关于在React中使用它的文章: React Newline to break (nl2br)
引用文章内容:
因为你知道React中的所有东西都是函数,所以你真的做不到这点。
this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />')
由于返回一个包含DOM节点的字符串,这也是不被允许的,因为必须只是一个字符串。
然后你可以尝试像这样做:
{this.props.section.text.split(“\n”).map(function(item) {
return (
{item}
<br/>
)
})}
那也是不允许的,因为 React 是纯函数,而且两个函数不能挨在一起。
简而言之,解决方案是:
{this.props.section.text.split(“\n”).map(function(item) {
return (
<span>
{item}
<br/>
</span>
)
})}
现在我们正在用一个 span 包装每个换行符,这很好的工作是因为 span 具有内联显示属性。现在我们得到了一个有效的 nl2br 换行解决方案。
....map(function (item, i) { return <span key={i}>{item}<br/></span> })
。 - denislexic<br/>
:...map(function (item, i, arr) {return <span key={i}>{item}{arr.length-1 === i ? null : <br/>}</span>})
。请注意,我包含了.map()
的第三个参数。 - Lasha[object Object]
。 - Ed.return text.trim().split(/\n{2,}/).map(p => <p>{p}</p>)
。 - Kip解决方案是在显示内容的元素上设置white-space
属性:
white-space: pre-line;
white-space
属性与word-wrap
一起使用,以防止溢出。p {
white-space: pre-wrap;
word-wrap: break-word;
}
word-break
吧?word-wrap
不在 CSS 规范中。 - Liamword-wrap
是一种非标准且已过时的实现,不应再使用。出于遗留原因,用户代理必须将word-wrap视为overflow-wrap
属性的遗留名称别名。 - Liam从React 16开始,组件可以返回一个元素数组,这意味着你可以创建如下的组件:
export default function NewLineToBr({children = ""}){
return children.split('\n').reduce(function (arr,line) {
return arr.concat(
line,
<br />
);
},[]);
}
您可以像这样使用它:
<p>
<NewLineToBr>{address}</NewLineToBr>
</p>
喜欢 webit 版本。我不知道 Fragment 组件,它非常有用。但是不需要使用 reduce 方法。Map 就足够了。此外,在 React 中,列表确实需要键,但从迭代方法使用索引是一个不好的习惯。ESLint 一直在我的警告中强调这一点,直到我遇到混淆错误。所以代码应该像这样:
const NewLine = ({ children }) =>
children.split("\n").map(line => (
<Fragment key={uuidv4()}>
{line}
<br />
</Fragment>
));