如何在react组件中添加小部件

Question

我想添加这个小部件(源代码：https://www.npmjs.com/package/@layerzerolabs/aptos-bridge-widget)：

<script
  src="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.js"
  defer
  integrity="sha384-${checksum}"
  async
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.css"
/>
<aptos-bridge />

在我的组件react中：src/pages/home/index.tsx：

return (
    <>
<Root>
        <IconContainer>
          <img width="500" height="500px" src={logo} />
        </IconContainer>
        <aptos-bridge />
      </Root>
    </>

但是他们总是告诉我同样的错误：Property 'aptos-bridge' does not exist on type 'JSX.IntrinsicElements'. TS2339

我已经尝试过将<script> & <link>放在index.html中，但是当我将aptos桥接在我的反应组件上时，也出现了同样的错误。

Answer 1

只需将小部件的所有需求插入到JSX元素的dangerouslySetInnerHTML属性中即可。

尝试以下几点：

<div dangerouslySetInnerHTML={{__html: data}} />

其中data是包含以下内容的字符串：

`<script src="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.js" defer integrity="sha384-${checksum}" async></script>
<link rel="stylesheet" href="https://unpkg.com/@layerzerolabs/aptos-bridge-widget@latest/element.css" />
<aptos-bridge />`