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

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

此 link 表示 Reactjs 是渐进式的，可以按如下方式添加到常规网络应用程序中：

为组件创建一个支架：

<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'
);

但我不确定如何为我示例中的功能组件执行此操作。

解决方法

两者之间存在巨大差异：

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-ing 一切的痛苦。另一方面，后者在任何地方都可以运行，因为它是一个有效的 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}`
}));

为了得到完整的答案，您的代码最初失败了，因为您使用一对嵌套的刻度 (`) 过早地关闭了内插字符串。