将代码分离到函数中并调用它不会呈现

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调用足以返回整个调用的结果（它只返回该 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'));