javascript 我可以在没有 React 的情况下使用 jsx 在脚本中内联 HTML 吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30430982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use jsx without React to inline HTML in script?
提问by SKing7
Can I use inline HTML in a script as below by using a library like jsx:
我可以使用像 jsx 这样的库在如下脚本中使用内联 HTML 吗？
<script src="jsx-transform.js"></script>
<script type="text/jsx">
define('component', function () {
return (<div>test html code</div>);
});
</script>
回答by Steven Spungin
I was able to write JSX files and inject them into an HTML page using a 'fake' React file.
我能够编写 JSX 文件并使用“假”React 文件将它们注入到 HTML 页面中。
no-react.js
无反应.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;
}
};
Then compile your jsx.
然后编译你的jsx。
test.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>
);
Resulting compiled 'test.js'
结果编译的'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")));
And finally, the HTML page that includes both scripts.
最后，包含这两个脚本的 HTML 页面。
index.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>
回答by Luke Watts
React renders JSX html syntax to JS using functions such as React.createElement (among others for Fragments and so on). But that all boils down to the @babel/plugin-transform-react-jsx plugin which does the transpiling of this:
React 使用 React.createElement 等函数将 JSX html 语法呈现给 JS（以及其他用于 Fragment 等的函数）。但这一切都归结为 @babel/plugin-transform-react-jsx 插件，它执行以下转换：
return(<div id="hello">Hello World</div>)
into this...
进入这个...
return React.createElement('div', {id: 'hello'}, 'Hello World');
However you can replace React.createElement with you're own function to do this. You can read more on that here: https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html
但是你可以用你自己的函数替换 React.createElement 来做到这一点。你可以在这里阅读更多内容：https: //babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html
You should also look at libraries which do exactly this such as nervjs, jsx-renderand deku. All of these use a JSX html syntax without react. Some (such as jsx-render) are only focused on converting JSX to the final JS, which might be what you're looking for.
您还应该查看完全执行此操作的库，例如nervjs、jsx-render和deku。所有这些都使用 JSX html 语法而没有反应。一些（例如 jsx-render）只专注于将 JSX 转换为最终的 JS，这可能是您正在寻找的。
The author of that package wrote an article on it here: https://itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561
该包的作者在这里写了一篇文章：https: //itnext.io/lessons-learned-using-jsx-without-react-bbddb6c28561
Also Typescript can do this if you use that...but I've no first hand experience with it.
如果你使用它，Typescript 也可以做到这一点......但我没有第一手经验。
To sum up
总结
You can do it without React, but not without Babel or Typescript.
你可以不用 React，但不用 Babel 或 Typescript。
回答by Michelle Tilley
JSX is not a string-based templating language; it compiles to actual JavaScript function calls. For example,
JSX 不是基于字符串的模板语言；它编译为实际的 JavaScript 函数调用。例如，
<div attr1="something" attr2="other">
Here are some <span>children</span>
</div>
transpiles to
转译为
React.createElement("div", {attr1: "something", attr2: "other"},
"Here are some ", React.createElement("span", null, "children")
)
回答by Sagi Medina
I was looking for something like this myself. A way to write Components and JSX like for simple projects. Didn't find one that I liked so I've built this: https://github.com/SagiMedina/Aviya#aviyaHave a look, maybe it will answer your problem as well.
我自己也在寻找这样的东西。一种为简单项目编写组件和 JSX 的方法。没有找到我喜欢的，所以我做了这个：https: //github.com/SagiMedina/Aviya#aviya看看，也许它也能解决你的问题。
回答by jtbandes
It looks like the dom-chefpackage can do this. From the readme:
看起来dom-chef包可以做到这一点。从自述文件：
- No API, JSX gets auto transformed into actual DOM elements.
// babel.config.js const plugins = [ [ '@babel/plugin-transform-react-jsx', { pragma: 'h', pragmaFrag: 'DocumentFragment', } ] ]; // ...const {h} = require('dom-chef'); const handleClick = e => { // <a> was clicked }; const el = ( <div class="header"> <a href="#" class="link" onClick={handleClick}>Download</a> </div> ); document.body.appendChild(el);
- 没有 API，JSX 会自动转换为实际的 DOM 元素。
// babel.config.js const plugins = [ [ '@babel/plugin-transform-react-jsx', { pragma: 'h', pragmaFrag: 'DocumentFragment', } ] ]; // ...const {h} = require('dom-chef'); const handleClick = e => { // <a> was clicked }; const el = ( <div class="header"> <a href="#" class="link" onClick={handleClick}>Download</a> </div> ); document.body.appendChild(el);
回答by Mike Aski
You can have a look at documentation: in-browser JSX transform, and also see Babel documentation
您可以查看文档：in-browser JSX transform，也可以查看Babel 文档
You can achieve what you want, but it is discouraged in production...
你可以实现你想要的，但在生产中是不鼓励的......
回答by Chenglu
Jsx parse the return (<div>test html code</div>);to something like this return React.createElement('div', {...});
Jsx 解析 return (<div>test html code</div>);成这样的return React.createElement('div', {...});
then if you don't using react.js, then browser will not know what Reactis and trigger an error.
那么如果您不使用react.js，那么浏览器将不知道是什么React并触发错误。
回答by Julian Suggate
You will need something to transform the JSX into JS function calls. React uses Babel to do this -- you would probably be best off with that too.
您需要将 JSX 转换为 JS 函数调用。React 使用 Babel 来做到这一点——你可能也最好这样做。
There's a library by the creators of Preact that essentially does what you're after called vhtml. The tagline is "Render JSX/Hyperscript to HTML strings, without VDOM".
Preact 的创建者有一个库，它基本上可以完成您所追求的vhtml。标语是“将 JSX/Hyperscript 渲染为 HTML 字符串，没有 VDOM”。
Here is a copy of the Readme at time of writing:
这是撰写本文时自述文件的副本：
Usage
用法
// import the library:
import h from 'vhtml';
// tell babel to transpile JSX to h() calls:
/** @jsx h */
// now render JSX to an HTML string!
let items = ['one', 'two', 'three'];
document.body.innerHTML = (
<div class="foo">
<h1>Hi!</h1>
<p>Here is a list of {items.length} items:</p>
<ul>
{ items.map( item => (
<li>{ item }</li>
)) }
</ul>
</div>
);
New: "Sortof" Components!
新：“Sortof”组件！
vhtml intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML. However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial".
vhtml 故意不将 JSX 转换为虚拟 DOM，而是直接将其序列化为 HTML。但是，仍然可以将基本的纯功能组件用作一种“模板部分”。
When vhtml is given a Function as the JSX tag name, it will invoke that function and pass it { children, ...props }. This is the same signature as a Pure Functional Component in react/preact, except children is an Array of already-serialized HTML strings.
当 vhtml 被赋予一个 Function 作为 JSX 标签名称时，它将调用该函数并将其传递给 {children, ...props }。这与 react/preact 中的纯函数组件签名相同，除了 children 是一个已经序列化的 HTML 字符串数组。
This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components.
这实际上意味着可以使用这些简单的组件甚至更高阶的组件来构建组合模板修饰符。
Here's a more complex version of the previous example that uses a component to encapsulate iteration items:
这是上一个示例的更复杂版本，它使用一个组件来封装迭代项：
let items = ['one', 'two'];
让项目 = ['一个'，'两个'];
const Item = ({ item, index, children }) => (
<li id={index}>
<h4>{item}</h4>
{children}
</li>
);
console.log(
<div class="foo">
<h1>Hi!</h1>
<ul>
{ items.map( (item, index) => (
<Item {...{ item, index }}>
This is item {item}!
</Item>
)) }
</ul>
</div>
);
The above outputs the following HTML:
以上输出以下 HTML：
<div class="foo">
<h1>Hi!</h1>
<ul>
<li id="0">
<h4>one</h4>This is item one!
</li>
<li id="1">
<h4>two</h4>This is item two!
</li>
</ul>
</div>
