将ReactJS功能组件添加到常规Web应用程序(未解析JSX)

Question

这个链接说Reactjs是渐进的，可以添加到常规的web应用程序中，如下所示：

为组件创建支架：

<div id="root"></div>

将React脚本标签添加到您的标题：

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

加载React组件：

<script src="mathjax.js"></script>

创建React组件(这里是mathjax.js中的功能组件(：

import React, { useState, useEffect } from 'react';
import { MathComponent } from 'mathjax-react';
const e = React.createElement;
const math_styles = {
"color" : "black",
"display" : "none"
}
function MathJax() {

const [count, setCount] = useState("");
return e(`
<div style={math_styles}>
<MathComponent tex={String.raw`${count}`} />
</div>
`)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(LikeButton), domContainer);
export default MathJax;

注意，我添加了链接中建议的环绕代码：

// at top
const e = React.createElement;
// at bottom
const domContainer = document.querySelector('#root');
ReactDOM.render(e(MathJax), domContainer);

我还尝试将type='module'添加到脚本标签：

<script type="module" src="mathjax.js"></script>

但我得到以下错误：

Uncaught SyntaxError: missing ) after argument list

React组件中的JSX似乎正在引发问题。但是上面链接中的示例代码显示了像我所做的那样将JSX封装在模板文本字符串中。

从技术上讲，链接中的示例显示了附加参数的传递，如下所示：

return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);

但我不确定我将如何使它适用于像我的示例中那样的功能组件。

Answer 1

之间存在巨大差异

return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);

和

return e(`
<div style={math_styles}>
<MathComponent tex={String.raw`${count}`} />
</div>
`);

您使用的语法是JSX，并且您试图将JSX包含在不支持jsx的环境/方法中，这完全违背了练习的目的。您应该使用其中一个或另一个。JSX需要转换为正常的javascript，但避免了手动React.createElement处理所有内容的痛苦。另一方面，后者在任何地方都可以运行，因为它是一个有效的javascript。没有理由像那样将这两种方法结合起来(在大多数情况下，它根本不起作用(。在您的情况下，它肯定不会起作用，因为您没有使用任何作为babel的转发器来为您处理工作。

其实很简单。想象一下，React.createElement只是在后台执行document.createElement(它有点复杂，但对于这种特殊情况来说，它是一个不错的基础(。在这种情况下，当引擎遇到以下情况时，期望从中得到什么：

document.createElement(
`<div style={math_styles}>
<MathComponent tex={String.raw`${count}`} />
</div>`
);

这不是一个有效的元素。文档应该创建什么元素？！

JSX是语法糖，它实际上被翻译成您在第一个代码示例中看到的代码。

因此，当您转换JSX:时

<div style={math_styles}>
<MathComponent tex={String.raw`${count}`} />
</div>

它将被转换为：

React.createElement("div", {
style: math_styles
}, React.createElement(MathComponent, {
tex: String.raw`${count}`
}));

为了使答案完整，您的代码最初是失败的，因为您使用嵌套的一对记号(`(过早地关闭了插入的字符串。