Question

我在这里找到了几个解决这个问题的答案，这就是为什么我找到了我的一般方法。但正如大多数答案所说，插入代码片段：

var squares =[];

for(let i=1; i<10; i++){

    squares.push(<div className="square" key={i}></div>);       
}

在render方法之前的类中。但它不起作用。然后我把相同的代码放在课外，它可以工作，但现在我无法访问状态范围（如果我没有记错的话）。我也很困惑，为什么我的代码编辑器不允许我将var更改为let（内部类）。

有什么想法吗？

感谢。

Answer 1

大多数答案都说在渲染方法之前将代码片段插入到类中。但它不起作用。

这些答案可能意味着：

someMethod() {
  var squares =[];

  for(let i=1; i<10; i++){
     squares.push(<div className="square" key={i}></div>);       
  }
}

render() {
  return (
     // ...
  )
}

虽然你可能会这样做：

var squares =[];

for(let i=1; i<10; i++){
   squares.push(<div className="square" key={i}></div>);       
}

render() {
  return (
     // ...
  )
}

然后我把相同的代码放在课外，但现在我可以使用了无法访问状态范围

正确，就是这样。

我还怀疑你想在屏幕上显示这个，在这种情况下你也应该把它显示出来：

someMethod() {
  var squares =[];

  for(let i=1; i<10; i++){
     squares.push(<div className="square" key={i}></div>);       
  }
  return squares;
}

render() {
  return (
    <div>
     {this.someMethod()}
    </div>
  )
}

Answer 2

但是，正如大多数答案所说，在类中插入代码片段在渲染方法之前。

不，你不会直接在render方法之外的类中插入for循环，而是直接在其中插入

render () {
    var squares =[];
    for(let i=1; i<10; i++){
       squares.push(<div className="square" key={i}></div>);       
    }
    return (
       <div>{squares}</div>
    )
}

为什么我的for循环在React中的render方法之前不能在我的类中工作？

2 个答案: