我正在尝试通过执行以下操作在我的 react 组件中的单独行上显示字符串数组：
<div>
{this.props.notifications.join('\n')}
</div>
但是，这似乎不起作用。this.props.notifications 是我想在 div 中呈现的字符串数组。有谁知道我该如何解决这个问题？
如何在react组件中显示字符串数组
IT技术
javascript
reactjs
typescript
2021-05-26 11:04:47
3个回答
使用 a<p />来渲染每一行怎么样？
<div>
{this.props.notifications.map(txt => <p>{txt}</p>)}
</div>
这将在不同的段落中呈现每个元素。
我希望每个字符串都在单独的行上。
Array/map()在渲染中使用：
<div>
{ this.props.notifications.map(notification => <p>{ notification }</p>) }
</div>
您可以使用字符串文字或\n.
但是您需要将它与 css 规则结合起来：
white-space: pre-line;
这是一个带有字符串文字的运行示例：
const arr = ['this is line #1', 'this is line #2', 'this is line #3']
const App = () => (
<div className="line-break">
{
arr.map(str => {
return(`
${str}
`)
})
}
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));.line-break {
white-space: pre-line;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>这是一个正在运行的示例\n：
const arr = ['this is line #1', 'this is line #2', 'this is line #3']
const App = () => (
<div className="line-break">
{
arr.join('\n')
}
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));.line-break {
white-space: pre-line;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>其它你可能感兴趣的问题