reactjs 如何在nextJS上从termly获取脚本在jsx中运行

zaq34kh6  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(116)

我正在使用termly来帮助我起草一个网站的法律条款。他们给了我一些html,里面有一个,我似乎不能让它在jsx页面上运行。我已经尝试了脚本和nextjs docs的dangerouslyrunhtml,没有任何运气。
下面是他们给我的代码:

<div name="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
<script type="text/javascript">(function(d, s, id) {
  var js, tjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://app.termly.io/embed-policy.min.js";
  tjs.parentNode.insertBefore(js, tjs);
}(document, 'script', 'termly-jssdk'));</script>

下面是我将其嵌入到网页索引中的尝试

import AppLayout from "../../layouts/AppLayout";
import Head from 'next/head'
import Script from "next/script";

const Privacy = () => {

    return (
        <AppLayout fullWidth={true}>
            <Head>
                <title>Citations - Facti</title>
            </Head>
            <div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
            <Script type="text/javascript">
                (function(d, s, id) {
                    var js, tjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "https://app.termly.io/embed-policy.min.js";
                tjs.parentNode.insertBefore(js, tjs);
                }(document, 'script', 'termly-jssdk'));
            </Script>
        </AppLayout >
    );
}

export default Privacy;

这最终给我带来了以下与AppLayouy相关的错误,但如果我去掉termly给出的部分,它运行得很好:

pages/privacy/index.tsx
Error: 
  x Unexpected token `AppLayout`. Expected jsx identifier
    ,-[C:\Users\jonat\facti\client\pages\privacy\index.tsx:5:1]
  5 | const Privacy = () => {
  6 | 
  7 |     return (
  8 |         <AppLayout fullWidth={true}>
    :          ^^^^^^^^^
  9 |             <Head>
 10 |                 <title>Citations - Facti</title>
 10 |             </Head>
    `----

Caused by:
    Syntax Error

编辑:
这里是另一个尝试使用脚本从NextJS。页面加载没有错误,但没有显示。不确定这是一个长期的问题或我的代码。

import AppLayout from "../../layouts/AppLayout";
import Head from 'next/head'
import Script from "next/script";

const Privacy = () => {

    return (
        <AppLayout fullWidth={true}>
            <Head>
                <title>Citations - Facti</title>
            </Head>
            <div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
            <Script id="id-is-required-for-inline-scripts">
                {
                    `(function(d, s, id) {
                        var js, tjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) return;
                        js = d.createElement(s); js.id = id;
                        js.src = "https://app.termly.io/embed-policy.min.js";
                        tjs.parentNode.insertBefore(js, tjs);
                    }(document, 'script', 'termly-jssdk'));`
                }
            </Script>
        </AppLayout >
    );
}

export default Privacy;
gcuhipw9

gcuhipw91#

Script是一个React组件,因此其内容必须是有效的JSX。请查看docs以查看属性、要求和加载选项。

<Script id="id-is-required-for-inline-scripts">
 {`(function(d, s, id)...rest-of-your-code`}
</Script>

不太确定代码的作用,但似乎可以只使用Script组件。

<Script id="termly-jssdk" src="https://app.termly.io/embed-policy.min.js" />
<div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe" />

相关问题