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

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调用里面足以恢复整个调用的结果（它只是返回的映射值映射该迭代）。

您只需要在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'));