Reactjs沒有顯示正確的標記從渲染（）函數

Question

我仍然在學習Reactjs的進步。

我想錶行內填入表頭。

不知何故下面編寫的代碼是通過renderTableHeaders處理所生成的表頭（）函數作爲唯一的純文本。

module.exports = React.createClass({ 

    getInitialState: function() { 
    return { 
     defaultTableHeaders: [ 
     'a', 'b', 'c', 'd', 
     ] 
    } 
    }, 

    renderTableHeaders: function() { 

     var markup = []; 

     var defaultTableHeaders = this.state.defaultTableHeaders; 

     for (var index = 0; index < defaultTableHeaders.length; index++) { 
     markup.push('<th>' + defaultTableHeaders[index] + '</th>'); 
     } 

     return markup; 
    }, 

    render: function() { 

    return (
     <thead> 
     <tr> 
      {this.renderTableHeaders()} 
     </tr> 
     </thead> 
    ); 
    } 

}); 

當我修改render（）函數到下面時，它會正常工作。任何想法爲什麼？

render: function() { 

    return (
     <thead> 
     <tr> 
      <th>a</th><th>b</th><th>c</th><th>d</th> 
     </tr> 
     </thead> 
    ); 
    } 

Answer 1

使用JSX語法創建和推動元素的數組：

markup.push(<th>{defaultTableHeaders[index]}</th>); 

Answer 2

是的，所以在你renderTableHeaders(）你返回一個數組。 所以，當你這樣做：{this.renderTableHeaders()} 它真的只是一個JavaScript和你所需要的所有變量數組。 嘗試使用{markup}而不是直接調用該函數。 看看這個答案在這裏： loop inside React JSX

Answer 3

的主要問題是，你的renderTableHeaders函數返回一個字符串，而不是返回實際JSX標記。

請試試這個：

module.exports = React.createClass({ 
    getInitialState: function() { 
    return { 
     defaultTableHeaders: [ 
     'a', 'b', 'c', 'd', 
     ] 
    } 
    }, 

    renderTableHeaders: function() { 
    var defaultTableHeaders = this.state.defaultTableHeaders; 

    return defaultTableHeaders.map(function (header) { 
     return (
     <th>{header}</th> 
    ); 
    }) 
    }, 

    render: function() { 
    return (
     <thead> 
     <tr> 
      {this.renderTableHeaders()} 
     </tr> 
     </thead> 
    ); 
    } 
});