我可以使用像 jsx 这样的库在如下脚本中使用内联 HTML 吗？
<script src="jsx-transform.js"></script>
<script type="text/jsx">
define('component', function () {
return (<div>test html code</div>);
});
</script>
我可以在没有 React 的情况下使用 jsx 在脚本中内联 HTML 吗？
IT技术
javascript
reactjs
2021-05-18 01:01:01
4个回答
我能够编写 JSX 文件并使用“假”React 文件将它们注入到 HTML 页面中。
无react.js
/**
* Include this script in your HTML to use JSX compiled code without React.
*/
const React = {
createElement: function (tag, attrs, children) {
var element = document.createElement(tag);
for (let name in attrs) {
if (name && attrs.hasOwnProperty(name)) {
let value = attrs[name];
if (value === true) {
element.setAttribute(name, name);
} else if (value !== false && value != null) {
element.setAttribute(name, value.toString());
}
}
}
for (let i = 2; i < arguments.length; i++) {
let child = arguments[i];
element.appendChild(
child.nodeType == null ?
document.createTextNode(child.toString()) : child);
}
return element;
}
};
然后编译你的jsx。
测试.jsx
const title = "Hello World";
document.getElementById('app').appendChild(
<div>
<h1>{title}</h1>
<h2>This is a template written in TSX, then compiled to JSX by tsc (the Typescript compiler), and finally
injected into a web page using a script</h2>
</div>
);
结果编译的'test.js'
var title = "Hello World";
document.querySelector('#app').appendChild(React.createElement("div", null,
React.createElement("h1", null, title),
React.createElement("h2", null, "This is a template written in TSX, then compiled to JSX by tsc (the Typescript compiler), and finally" + " " + "injected into a web page")));
最后，包含这两个脚本的 HTML 页面。
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>no-react</title>
<script src="no-react.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script src="test.js"></script>
React 使用 React.createElement 等函数将 JSX html 语法呈现给 JS（以及其他用于 Fragment 等的函数）。但这一切都归结为 @babel/plugin-transform-react-jsx 插件，它执行以下转换：
return(<div id="hello">Hello World</div>)
进入这个...
return React.createElement('div', {id: 'hello'}, 'Hello World');
但是你可以用你自己的函数替换 React.createElement 来做到这一点。您可以在此处阅读更多相关信息：https : //babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html
您还应该查看完全执行此操作的库，例如nervjs、jsx-render和deku。所有这些都使用 JSX html 语法而没有react。一些（例如 jsx-render）只专注于将 JSX 转换为最终的 JS，这可能是您正在寻找的。
该包的作者在这里写了一篇文章：https : //itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561
如果你使用它，Typescript 也可以做到这一点......但我没有第一手经验。
总结
你可以不用 React，但不用 Babel 或 Typescript。
JSX 不是基于字符串的模板语言；它编译为实际的 JavaScript 函数调用。例如，
<div attr1="something" attr2="other">
Here are some <span>children</span>
</div>
转译为
React.createElement("div", {attr1: "something", attr2: "other"},
"Here are some ", React.createElement("span", null, "children")
)
我自己也在寻找这样的东西。一种为简单项目编写组件和 JSX 的方法。没有找到我喜欢的，所以我做了这个：https : //github.com/SagiMedina/Aviya#aviya 看看，也许它也能解决你的问题。
其它你可能感兴趣的问题