有没有办法禁用React的警告“无效的事件处理程序属性`onclick`”？

Question

我正在用React构建一个Web应用，我需要在其中展示一些广告。 问题如下：

我需要在React组件中显示这些广告，已经给出了这些广告的html代码，它们可以正常工作（到目前为止），但它们发出了一个警告：

    index.js:1375 Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
        in a (at ad-display.component.jsx:4)

我确实知道警告的原因是应该将onClick属性改为onClick，但是我不想弄乱已经提供给我的原始HTML代码，以防它会影响客户的收入

广告代码是一个简单的代码：

    <a onclick="setSomething(event, this)" href="http://coollink.com" id="rt_aff_banner_514" border="0" target="_blank"><img border="0" src="https://coolimage/1543860030.png"/></a>

所以我想知道是否有一种方法可以禁用这些警告，因为很难对它们进行调试。

另外，如果我做这件事的方式是错误的，请随时责骂我，我需要以任何其他方式将此html代码插入我的React代码中

提前致谢！

Answer 1

我认为您要寻找的是危险地设置内部html：

const ads = `<a onclick="setSomething(event, this)" 
   href="http://coollink.com" id="rt_aff_banner_514"
   border="0" target="_blank">
    <img border="0" src="https://coolimage/1543860030.png"/>
   </a>`

<div id="ads" dangerouslySetInnerHTML={{ __html: ads }}></div>

Answer 2

@HanselDoullery这是对react的语法警告。 您正在绑定html事件处理程序onclick ，它将像普通事件处理程序一样工作，但是react编译器会像在警告语法中一样为您提供警告，用于绑定click事件的方式略有不同。 请参考此链接 。

在您的情况下，您将为click处理程序编写如下内容：

<a onClick={()=> { setSomething(event, this)}} ...>
....
</a>

Answer 3

如果您具有全局功能，则可以尝试以下操作：

<a onClick={(e)=> { window.setSomething(event, this); }} ref="http://coollink.com" id="rt_aff_banner_514" border="0" target="_blank">
....
</a>