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'));

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

2 个答案: