有沒有辦法禁用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>