我正在使用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;
1条答案
按热度按时间gcuhipw91#
Script是一个React组件,因此其内容必须是有效的JSX。请查看docs以查看属性、要求和加载选项。
不太确定代码的作用,但似乎可以只使用
Script
组件。