Question

我的代码工作正常，但它给了我一个警告

警告：bind（）：您正在将组件方法绑定到组件。 React会以高性能方式自动为您执行此操作，因此您可以安全地删除此调用。

我还使用on {= {this.myFun.bind（null，＆＃34; myvalue＆＃34;）}，如Why does React warn me against binding a component method to the object?

中所述

它仍然给我警告。

我的代码：

var MyClass = React.createClass({
  myFun : function (value){  
      console.log(value);  
  },
  render: function () {
  var that = this; 
    var card = this.props.data.map(function (val,key) {
      return (
        <p onClick={that.myFun.bind(null,val)}> Click Me</p>
        );
    });
    return (  
        <div>
        {card}  
        </div>
      );
  }
});

Answer 1

您的代码存在一些问题

render: function () { var this = that;

应该是

render: function () { var that = this;
return ( {card})会出现you may have returned undefined or null or an Object错误，因此您需要将其包含在<div>{card}</div>之类的div中以返回React元素。
组件名称必须以大写字符开头。请参阅此处的说明：React - Adding component after AJAX to view

查看工作演示

var MyClass = React.createClass({
  myFun : function (value){  
      console.log(value);  
  },
  render: function () {
    var that = this;
    var card = this.props.data.map(function (val,key) {
      return (
        <p key={key} onClick={that.myFun.bind(null,val)}> Click Me</p>
        );
    });
    return (
        <div>{card}</div>
      );
  }
}); 

ReactDOM.render(<MyClass data={['1', '2']}/>, document.getElementById('app'))

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

注意：{@ 1}}已弃用，将在v16.0中删除因此你应该通过扩展来编写你的组件 React.createClass语法

Answer 2

唯一错过的就是将that分配给this

var myClass = React.createClass({
  myFun : function (value){  
      console.log(value);  
  },
  render: function () {
    var that = this; 
    var card = this.props.data.map(function (val,key) {
      return <p onClick={that.myFun.bind(null,val)}> Click Me</p>;
    });
    return <div>{card}</div>;
  }
});

Answer 3

执行此操作的最佳方法是将其提取到子组件中并将params作为道具传递。这样您就不会在每个渲染上创建一个新函数，并且会阻止不必要的重新渲染（More info here jsx-no-bind)：

＆＃13;

var Item = React.createClass({
  handleClick: function() {
    this.props.onItemClick(this.props.val);
  },
  render: function() {
    return (
      <p onClick={this.handleClick}>Click Me</p>
    );
  }
});

var MyClass = React.createClass({
  myFun: function (value){  
      console.log(value);  
  },
  render: function () {
    var that = this; 
    var card = this.props.data.map(function (val, key) {
      return (
        <Item onItemClick={that.myFun} val={val} />
      );
    });
    return (
      <div>{card}</div>
    );
  }
});

ReactDOM.render(
  <MyClass data={['a', 'b', 'c']} />,
  document.getElementById('test')
);

＆＃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="test"></div>

＆＃13;

此外，您应该考虑使用或学习es6，这将大大清理您的代码。

render方法中的bind（）给我一个警告？

3 个答案: