Javascript 反应禁用所有事件。如何忽略“onClick”&`onChange`生成DOM时的道具

我希望在“咨询”模式下显示react组件及其子组件。这意味着自动删除所有的

onClick

，

onChange

。。。来自

&co.的道具。我希望在需要的时候临时做这些，让我的组件恢复生机

如果不在每个子组件中手动调节

onClick

和

onChange

的使用，我如何做到这一点？我搜索一种方式来表示“Hey react，在为所有这些组件生成DOM时忽略

onClick

&

onChange

道具”

---

你知道怎么做吗？我愿意使用其他解决方案，这些解决方案将避免在最后在DOM元素上触发事件。

Hmmm，您可能需要用另一个函数包装您的函数，然后您可以从单个点控制启用/禁用

function activable(cb) {
  return function wrap(...args) {
    if (process.env.ENABLE_ACTIONS) {
      return cb(...args);
    }
  }
}

function MyComponent() {
   // It's better to pass in anon functions to our activable function so
   // that our function maintains it's scope.  Otherwise you would need
   // to bind the scope. Only if needed I guess, but good to be aware of.
   const onClick = activatable((e) => {
      console.log(e.target);
   });
   return (<button onClick={onClick}>do</button>);
}

功能可激活（cb）{
返回函数换行（…参数）{
if（process.env.ENABLE_操作）{
返回cb（…args）；
}
}
}
函数MyComponent（）{
//最好将一个非函数传递给我们的可激活函数，这样
//我们的函数保持了它的作用域，否则你需要
//绑定范围。仅在需要时，我猜，但最好注意。
const onClick=可激活（（e）=>{
console.log（如target）；
});
返回（do）；
}

所以，是的，一开始需要一些手动设置，但之后很容易控制

---

下面是一个运行示例：

---

转到

main.js

文件，然后更改顶部的

enableActions

标志，保存，然后按下按钮。

使用您自己的

React.createElement

包装器，该包装器有条件地去掉这些道具。或者一个包装器组件（使用

this.props.children

），谢谢您的回答。它应该是可以工作的，但是，知道应用程序中有很多组件，这个解决方案非常实用。我需要一个解决方案，它需要对代码进行最小的更改。编写一个babel插件？：）说真的，这会让你达到目的。我从来没有想到过这个解决办法，但可能是个好办法。我要去调查