为啥不能用 ReactJS 渲染 HTML

Posted 2023-03-07

【中文标题】为啥不能用 ReactJS 渲染 HTML

【英文标题】：Why cannot render HTML with ReactJS为什么不能用 ReactJS 渲染 HTML

【发布时间】：2019-01-25 04:01:49

【问题描述】：

我在网上看到了大量使用 React 和 typescript 的示例和测试，它们会发出类似这样的问题：

import * as ReactDOM from 'react-dom';

ReactDOM.render(
 <h1>Hello world!!</h1>, //or any other valid html snippet
 document.getElementById('root') as HTMLElement
);

但是，当我尝试在我的机器中重现这些多个示例时，我首先收到来自 VS 代码的高亮错误，然后当我尝试捆绑时，我收到此错误：

TS2686：“React”指的是一个 UMD 全局文件，但当前文件是一个 模块。考虑改为添加导入。

如果我没有将 HTML 作为函数的参数，而是写了 my SimpleComponent.render()，则生成的包不会出错。

那个代码 sn-p 有什么问题？

【参考方案1】：

尝试添加import * as React from 'react'。 <h1> 是 React 组件（将 JSX 转换为 javascript 后的 React.createClass('h1')），但您只导入了 ReactDOM。

【讨论】：

...因为一旦 JSX 被转译，<h1>Hello world!!</h1> 就变成了React.createElement("h1", /*...*/);。

太棒了！那行得通。如果 html 在那里被硬编码，你知道为什么需要那个参考吗？这对我来说没有意义。

你不需要引用它。这仍然有效，但 HTMLElement 是错误的。这是有效的 ReactDOM.render(

@HemadriDasari - OP 正在使用 TypeScript。 as HTMLElement 是正确的。

好吧抱歉我没有打字稿