将自定义标签导入 TypeScript

Question

I have a TypeScript file that creates an HTML page.我有一个创建 HTML 页面的 TypeScript 文件。 I like to import the module "model-viewer" and use it in my code.我喜欢导入模块“model-viewer”并在我的代码中使用它。

import * as fs from "fs";
import prettier from "prettier";
import React from "react";
import ReactDOMServer from "react-dom/server";
import "@google/model-viewer";

render();

 function render() {
   let html = ReactDOMServer.renderToStaticMarkup(<HelloWorldPage />);
   let htmlWDoc = "<!DOCTYPE html>" + HTML;
   let prettyHtml = prettier.format(htmlWDoc, { parser: "html" });
   let outputFile = "./output.html";
   fs.writeFileSync(outputFile, prettyHtml);
   console.log(`Wrote ${outputFile}`);
}

function HelloWorldPage(){
  return (
    <html>
      <head>
    <meta charSet="utf-8" />
    <title>Hello world</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  </head>
  <body>
  <div id='map'>
    <model-viewer
            src="/buddha1.glb"
            ios-src="/buddha1.usdz"
            ar
            ar-scale="fixed"
            ar-modes="scene-viewer quick-look"
            camera-controls
            alt="Model of House">
      </model-viewer>
    </div>
  </body>
</html>
);
}

I receive error Property 'model-viewer' does not exist on type 'JSX.IntrinsicElements'.我收到错误属性“模型查看器”在类型“JSX.IntrinsicElements”上不存在。 How to import module in this script.如何在此脚本中导入模块。

Answer 1

Ok I take another path to fix it好的，我走另一条路来解决它

import * as fs from "fs";
import prettier from "prettier";
import React from "react";
import ReactDOMServer from "react-dom/server";

render();

function render() {
  const myhtml = "<html><head><meta charSet='utf-8' /><title>Hello world</title> 
  <script type='module' src='https://unpkg.com/@google/model-viewer/dist/model- 
  viewer.min.js'></script></head><body><div id='map'> 
  <ModelViewsrc='/buddha1.glb'ios-src='/buddha1.usdz'arar-scale='fixed'ar- 
  modes='scene-viewer quick-look'camera-controlsalt='Model of House'> 
  </ModelView></div></body></html>"
  let html = ReactDOMServer.renderToStaticMarkup(<div dangerouslySetInnerHTML={{ 
  __html: myhtml }} />);
  let htmlWDoc = "<!DOCTYPE html>" + HTML;
  let prettyHtml = prettier.format(htmlWDoc, { parser: "html" });
  let outputFile = "./output.html";
  fs.writeFileSync(outputFile, prettyHtml);
  console.log(`Wrote ${outputFile}`);
}

But now I have another problem.但现在我有另一个问题。 "Failed at the @ render script." “@渲染脚本失败。” This happens because of this place "https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js" because it has @ symbol it gives an error.发生这种情况是因为这个地方“https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js”，因为它有@ 符号，它给出了一个错误。

将自定义标签导入 TypeScript

问题描述

1 个解决方案

解决方案1
0 2021-07-27 22:50:23

将自定义标签导入 TypeScript

问题描述

1 个解决方案

解决方案1 0 2021-07-27 22:50:23

解决方案1
0 2021-07-27 22:50:23