Question

我尝试通过执行以下操作在我的react组件中的不同行上显示字符串数组：

       <div>
          {this.props.notifications.join('\n')}
      </div>

然而，这似乎并没有起作用。 this.props.notifications是我想在div中呈现的字符串数组。有谁知道如何解决这个问题？

Answer 1

使用[0,2]渲染每一行怎么样？

<p />

这会将每个元素呈现在不同的段落中。

Answer 2

我希望每个字符串都在一个单独的行上。

在渲染中使用Array/map()：

<div>
  { this.props.notifications.map(notification => <p>{ notification }</p>) }
</div>

Answer 3

您可以使用string literals或white-space: pre-line; 但是你需要将它与css规则结合起来：

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>

{{1}}

如何在react组件中显示字符串数组

3 个答案: