在React JSX中的循環內循環

Question

我正在嘗試在像波紋管這樣的循環內部的jsx中渲染一個循環：

{this.state.ans.map(function(item) {
    return (
        {this.state.quest.map(
            function(item1) {return (item1)}
        )}        
        {item}
    )
})}

這沒有任何其他建議

Answer 1

您在第一個map語句中忘記了包裝div：

render() {
  return (
    <div>
      {this.state.ans.map(item =>
        <div> // this div was missing
          {this.state.quest.map(quest => quest)}
          {item}
        </div>
      )}
    </div>
  )
}

Answer 2

像這樣嘗試：

render(){
    return (
        .
        .
        .
        {this.state.ans.map((item) => {
            return (
                <div>
                    {this.state.quest.map((item1) => { 
                           return (item1); 
                        }
                    )}        
                   {item}
               </div>
            );
        })}
    );
}

從根本上講，您應該返回一個元素-在我的示例中為div （您不必使用最新的react版本）。 而且，使用lambda表達式為了this以引用正確的上下文。

如果不使用ES6，則可以在render方法的開頭添加以下語句：

var that = this;

然后將that與return內部的function(){}語法一起使用。