SKi*_*ng7 34 javascript reactjs
我可以使用像jsx这样的库在脚本中内联HTML:
<script src="jsx-transform.js"></script>
<script type="text/jsx">
define('component', function () {
return (<div>test html code</div>);
});
</script>
Ste*_*gin 26
我能够编写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.
test.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页面包含两个脚本.
的index.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>
小智 17
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 语法而没有反应。一些（例如 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 看看,也许它也会回答你的问题.
| 归档时间： |
|
| 查看次数： |
16241 次 |
| 最近记录： |