render 方法中的 bind() 给了我一个警告？

Question

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

警告：bind()：您正在将组件方法绑定到组件。 React 以高性能的方式自动为您完成此操作，因此您可以安全地删除此调用。

我也使用 onClick={this.myFun.bind(null,"myvalue")} 如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

您的代码有一些问题

1. render: function () { var this = that;

   应该是

   render: function () { var that = this;

2. return ( {card}) 将给出 you may have returned undefined or null or an Object 的错误，因此您需要将其包装在像 <div>{card}</div> 这样的 div 中以返回 React 元素。

3. 您的组件名称必须以大写字符开头。看这里的解释：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>

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

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

最好的方法是将其提取到子组件中并将参数作为道具传递。这样您就不会在每次渲染时都创建一个新函数，并且可以防止不必要的重新渲染 (More info here jsx-no-bind):

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

<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>

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