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.约翰你好！

等...

我没有得到任何错误，只是...的错误输出。

你好约翰2.你好约翰！

Answer 1

尝试使用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>)
    }
  }

Answer 2

尝试一下：

 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 3

您尝试过吗？

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

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

3 个答案: