问题描述
此 link 表示 Reactjs 是渐进式的,可以按如下方式添加到常规网络应用程序中:
为组件创建一个支架:
<div id="root"></div>
<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);
<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}`
}));
为了得到完整的答案,您的代码最初失败了,因为您使用一对嵌套的刻度 (`) 过早地关闭了内插字符串。