在我的代码上获取换行符时遇到问题[重复]

Question

class Test extends React.Component{
state={name: "John", numTimes: 2};

render() {
  let output = ""

  for (let i = 1; i <= this.state.numTimes; i++) {
    let evenOdd = i % 2

    if (evenOdd === 0) {
      output += i + ". Hello " + this.state.name + "!"
    } else {
      output += i + ". Hello " + this.state.name
    }
  }

  return <p>{output}</p>
}

}
ReactDOM.render(<Test /> , document.getElementById("react"));

<div id="react"></div>
<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>

我正在设置一个应用程序，它将通过输入获取用户名以及他们希望其名称显示多少次。

我尝试过对其进行样式设置，使用“\n”和断线将我自己的断线添加到输出中。

render() {
  let output = ""

  for (let i = 1; i <= this.state.numTimes; i++) {
    let evenOdd = i % 2

    if (evenOdd === 0) {
      output += i + ". Hello " + this.state.name + "!"
    } else {
      output += i + ". Hello " + this.state.name
    }
  }

  return <p>{output}</p>
}

我的 for 循环会打印出来！偶数，奇数，所以如果他们为数字做 2，那么期望的结果将是

1.你好约翰
2. 你好约翰！

等等……

我没有收到任何错误，只是...的输出不正确

1. 你好约翰 2。你好约翰！

Answer 1

试试这个：

 let output = ""
      for (let i = 1; i <= this.state.numTimes; i++) {
        let evenOdd = i % 2
        if (evenOdd === 0) {
          output += i + ". Hello " + this.state.name + "!"+'\n'
        } else {
          output += i + ". Hello " + this.state.name
        }
      }
return <p>{{output}}</p>

Answer 2

你试过了吗？

output += i + ". Hello " + this.state.name + "!"+ {"\n"}

Answer 3

尝试使用 div 作为它的块级元素，这样它会自动转到下一行

let output= []
  for (let i = 1; i <= this.state.numTimes; i++) {
    let evenOdd = i % 2
    if (evenOdd === 0) {
      output.push(<div key={i}>{i + ". Hello " + this.state.name + "!"}</div>) 
    } else {
      output.push( <div key={i}>{i + ". Hello " + this.state.name}</div>)
    }
  }