用reactjs呈現對象內的數組元素

Question

this.questions = [{ 
       "id" : 1 , 
       "question" : "question", 
       "answers" : ["A","B","C","D"], 
      }, 
      { 
       "id" : 2, 
       "question" : "question", 
       "answers" : ["A","B","C","D"], 
      }] 

我有一個像這樣的對象。我將這些數據渲染到一張桌子上。

renderTable(result) { 
     return (
      <table> 
      <tr><td>{result.id}</td><td>{result.question}</td></tr> 
      <tr><td>Answers</td>{result.answers}</td></tr> 
      </table>) 
    } 
render() { 
     return (
     <Row>   
      {this.questions.map(this.renderTable.bind(this))} 
     </Row>) 
    } 

問：

我要呈現的答案陣列不同的表中的數據標籤的每一個元素。 我該怎麼做？

問候，

Answer 1

使用地圖來遍歷回答，然後動態地創建TD的

renderTable(result) { 
    return (
     <table> 
     <tr><td>{result.id}</td><td>{result.question}</td></tr> 
     <tr><td>Answers</td>{result.answers.map(function(value,index){ 
           return(<td>{value}</td>); 
     })}</tr> 
     </table>) 
} 
render() { 
    return (
    <Row>   
     {this.questions.map(function(value,index){ 
      this.renderTable.bind(this,value); 
      }); 
     } 
    </Row>) 
} 

Answer 2

renderTable(){ 
    const answers = (items) => { 
     return items.map((item) => { 
     return (<td>{item}</td>) 
     }) 
    } 
    return this.questions.map((result) => { 
     return (
     <table> 
      <tr><td>{result.id}</td><td>{result.question}</td></tr> 
      <tr><td>Answers</td> 
      {this.answers(result.answers)} 
      </tr> 
     </table>) 
    ) 
    }) 
    } 
    render() { 
     return (
     <Row>   
      {this.renderTable()} 
     </Row> 
    ) 
    } 

你可以這樣做，用地圖迭代的答案

Answer 3

根據我，沒有必要創建renderTable（結果）。我已經在下面寫了代碼，請讓我知道它是否有幫助。

class MyComponent extends React.Component{ 

render() { 

    const data = [{ 
     "id" : 1 , 
     "question" : "question1", 
     "answers" : ["A1","B1","C1","D1"], 
     }, 
     { 
     "id" : 2, 
     "question" : "question2", 
     "answers" : ["A2","B2","C2","D2"], 
     }, 
     { 
     "id" : 3, 
     "question" : "question3", 
     "answers" : ["A3","B3","C3","D3"], 
     }, 
     { 
     "id" : 4, 
     "question" : "question4", 
     "answers" : ["A4","B4","C4","D4"], 
     }]; 

    const listItems = data.map((row) => 
     <li> 
      <table> 
       <tr><td>{row.id}</td><td>{row.question}</td></tr> 
       <tr><td>Answers:{row.answers}</td></tr> 
      </table> 
     </li> 
    ); 

    return (
     <div> 
      <ul> 
       {listItems} 
      </ul> 
     </div> 
    ); 
} 
}