Question

当我想使用我的自定义迭代器方法时，我遇到了问题。

这是array.map方法https://jsfiddle.net/p92ns6w6/

的工作示例

// working
var Hello = React.createClass({

    getInitialState: function() {
        return {
            cols: [
                {a: 1, b:1},
                {a: 2, b:2},
                {a: 3, b:3},
            ]
        };
    },


    render: function() {
        return <div>{
            this.state.cols.map(function(col, index){
                return <p key={index} >{col.a}</p>
            })
        }</div>;
    }
});

这不起作用https://jsfiddle.net/319gq7x1/

var CustomColsClass = function(cols){

    var _cols = cols

    return {
        each: function(fn){
            _cols.map(function(col, index){
                fn(col, index)
            })
        }
    }
}





var Hello = React.createClass({

    getInitialState: function() {
        return {
            cols: new CustomColsClass(
                [
                    {a: 1, b:1},
                    {a: 2, b:2},
                    {a: 3, b:3},
                ]
            )
        };
    },


    render: function() {
        return <div>{
            this.state.cols.each(function(col, index){
                console.log(index)
                return <p key={index} >{col.a}</p>
            })
        }</div>;
    }
});

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

Answer 1

事情就是你要做的事情，几乎是正确的，除了事实，

您没有从自定义的each功能返回，并且您不需要在返回中指定callback，而是由您传递的函数处理

还有一件事，因为CustomColsClass是一个功能，您可以直接调用它，而不是使用new关键字指定它

您的代码看起来像

var CustomColsClass = function(cols){

    var _cols = cols

    return {
        each: function(fn){
            console.log('map')
           return  _cols.map(fn)
        }
    }
}





var Hello = React.createClass({

    getInitialState: function() {
        return {
            cols: CustomColsClass(
                [
                    {a: 1, b:1},
                    {a: 2, b:2},
                    {a: 3, b:3},
                ]
            )
        };
    },


    render: function() {
        return <div>{
            this.state.cols.each(function(col, index){
                console.log(index)
                return <p key={index} >{col.a}</p>
            })
        }</div>;
    }
});

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

正在使用 JSFIDDLE

Answer 2

您可以直接在 JSX 中使用 map js函数，如下例所示。

＆＃13;

var Hello = React.createClass({

  getInitialState: function() {
    return {
      cols: [{
          a: 1,
          b: 1
        },
        {
          a: 2,
          b: 2
        },
        {
          a: 3,
          b: 3
        },
      ]
    };
  },


  render: function() {
    return <div> {
      this.state.cols.map(function(col, index) {
        return <p key={index + 1}>{col.a}</p>
      })
    } </div>;
  }
});

ReactDOM.render(
  <Hello name = "World" /> ,
  document.getElementById('container')
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

＆＃13;

自定义迭代器方法无法在渲染中工作

2 个答案: