我正在尝试将 JDoodle IDE 集成到 React 应用程序中。
我正在使用框架库
<Frame>
<IDE />
</Frame>
IDE组件
export function IDE(props: any) {
return (
<>
<div
data-pym-src="https://www.jdoodle.com/plugin"
data-language="java"
data-version-index="4"
>
</div>
<script
src="https://www.jdoodle.com/assets/jdoodle-pym.min.js"
type="text/javascript"
></script>
</>
);
}
我得到空白输出。
我期待得到这个 IDE
我知道我回答这个问题有点晚了。 但是您可以使用
dangerouslySetInnerHTMLconst IDE = () => {
return (
<div
dangerouslySetInnerHTML={{
__html: `
<!DOCTYPE html>
<html lang="en">
<head>
<title>JDoodle Plugin - Example</title>
</head>
<body>
<div
data-pym-src="https://www.jdoodle.com/plugin"
data-language="java"
data-version-index="4"
interactive="true"
data-libs="org.apache.commons:commons-lang3:3.4"
></div>
<script
src="https://www.jdoodle.com/assets/jdoodle-pym.min.js"
type="text/javascript"
></script>
</body>
</html>
`,
}}
></div>
);
};
export default IDE;