將代碼分離爲函數並調用它並不會呈現

Question

這很好。現在，我想將它合併到一個函數中，並在我的表達式中調用該函數。它不起作用。

工作代碼：

render: function() { 
     return (
     <div> 
      {this.props.list.map(function(listValue){ 
      return <p>{listValue}</p>; 
      })} 
     </div> 
    ) 
    } 
    }); 

    ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app')); 

與功能代碼（不工作）：

var List = React.createClass({ 
    addText: function() 
    { 
     this.props.list.map(function(listValue){ 
      return <p>{listValue}</p>; 
     }); 
    }, 
    render: function() { 
     return (
     <div> 
     {this.addText()} 
     </div> 
    ) 
    } 
    }); 

    ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app')); 

Answer 1

您已經提取的呼叫map到另一個功能和也許假設裏面的return調用足以返回整個調用的結果（它只是返回ns是該map迭代的映射值）。

你只需要返回地圖的結果您addText功能：

var List = React.createClass({ 
    addText: function() 
    { 
     return ( // <------ADD THIS 
      this.props.list.map(function(listValue){ 
      return <p>{listValue}</p>; 
      }) 
     ); //<<-----DON'T FORGET TO CLOSE OFF THE NEW BRACKET 
    }, 
    render: function() { 
     return (
     <div> 
     {this.addText()} 
     </div> 
    ) 
    } 
    }); 

Answer 2

TNX @Thomas ALTMANN，我忘了，再拍回我的第一次迴歸之前

var List = React.createClass({ 
    addText: function() 
    { 
     return (this.props.list.map(function(listValue){ 
      return <p>{listValue}</p>; 
     }) 
     ); 
    }, 
    render: function() { 
     return (
     <div> 
     {this.addText()} 
     </div> 
    ) 
    } 
    }); 

    ReactDOM.render(<List list={[1,2,3,4,5]} />, document.getElementById('app'));