如何在React.createElement的onClick中传递参数（不使用JSX）

方法1：匿名函数包裹 #

直接在onClick属性中传入匿名函数，点击时再调用目标函数并传递参数，这是最直观的实现方式。

修改后的代码示例：

return React.createElement("div", {
  key: item.id,
  className: "dummyClassObject",
  onClick: () => linking(item.link) // 箭头函数包裹，仅点击时执行linking
}, React.createElement("span", { className: "dummyClassLabel" }, item.label));

也可以用普通匿名函数写法：

onClick: function() {
  linking(item.link);
}

方法2：使用bind绑定参数 #

利用Function.prototype.bind将参数绑定到linking函数上，返回一个新的函数引用，点击时才会触发执行。第一个参数传null/undefined即可（无需指定this指向），后续为要传递的参数。

修改后的代码示例：

return React.createElement("div", {
  key: item.id,
  className: "dummyClassObject",
  onClick: linking.bind(null, item.link) // bind绑定参数，返回待触发的新函数
}, React.createElement("span", { className: "dummyClassLabel" }, item.label));

方法3：柯里化目标函数 #

将linking改造成柯里化函数，先接收link参数，返回一个处理点击事件的函数，适合需要复用逻辑的场景。

修改后的linking函数：

function linking(link) {
  return function() {
    console.log("Redirecting to " + link);
    window.open(link);
  }
}

然后在createElement中直接赋值：

return React.createElement("div", {
  key: item.id,
  className: "dummyClassObject",
  onClick: linking(item.link) // 此时返回的是点击触发的函数，不会立即执行
}, React.createElement("span", { className: "dummyClassLabel" }, item.label));

原理说明 #

直接写onClick: linking(item.link)时，组件渲染阶段就会执行linking(item.link)，并把返回值（此处为undefined）赋值给onClick，所以会出现函数被反复调用的情况。而上述三种方法都是给onClick赋值一个函数引用，只有当元素被点击时，这个函数才会执行，进而调用linking并传递参数。

内容的提问来源于stack exchange，提问作者Caden Skidmore