ReactJS通過映射迭代渲染多個UI組件

所以我環顧四周，還沒有真正找到解決方案。我想通過React中的.map()函數渲染多個UI元素，通過網絡請求獲取數據集。我儘可能在一個簡單的字符串中填充數據值，但似乎無法通過從單獨的函數調用UI來完成。以下是我有：ReactJS通過映射迭代渲染多個UI組件

readMode: function(item) { 
    return (
      <div> 
       <div className="itemNo">item.itemNo</div> 
       <div className="itemRef">item.itemRef</div> 
       <div className="itemColor">item.itemColor</div>      
      </div> 
    ) 
}, 

render: function() { 
    return (
     <div> 
      {this.state.inventory.map(function(item){ 
       return this.readMode(item); 
      })} 
     </div> 
    )  
} 

ReactDOM.render(
    <Inventory />, 
    document.getElementById("container") 
);

我想我得到真的很近，繞過所有的錯誤，但我留下了這樣一個底：TypeError: Cannot read property 'readMode' of undefined at eval

來源

2017-02-10 SVY

由於您使用的是普通的您的map參數中的JavaScript函數，您正在爲該函數創建一個新的上下文。因此，this值不會引用您的類，而是引用該函數的上下文。有兩種解決方案：

1）結合this現有map功能：(function(item){ //logic}).bind(this)

2）更好的選擇假設你可以使用ES6，使用箭頭功能。箭功能繼承父的上下文，讓您自動解決問題：

this.state.inventory.map(item => this.readMode(item))

來源

2017-02-10 19:14:03 ZekeDroid

'this.state.inventory.map（這一點。 readMode）'也可以 – Joe

加成@ ZekeDroid的答案，你可以這樣寫它更簡單的方法：

readMode: function() { 
    return this.state.inventory.map((item, i)=>{ 
     return (
      <div key={i}> 
       <div className="itemNo">{item.itemNo}</div> 
       <div className="itemRef">{item.itemRef}</div> 
       <div className="itemColor">{item.itemColor}</div>      
      </div> 
     ) 
    }) 

}, 

render: function() { 
    return (
     <div>    
      {this.readMode()}   
     </div> 
    )  
} 

ReactDOM.render(
    <Inventory />, 
    document.getElementById("container") 
);

來源

2017-02-10 19:20:21

我不認爲你需要綁定任何東西。你可以只聲明您的功能部件之外，因爲你並不需要「這個」：

const readMore = (item) => { return <div>{item.name}</div>; }

那麼你可以使用：

this.state.inventory.map(() => {return readMore(item); });

來源

2017-02-10 19:38:53 programmingheadaches

ReactJS通過映射迭代渲染多個UI組件

回答

相關問題