我正在使用 React 生成一个相当庞大且复杂的 DOM 树结构 但我选择不使用 JSX（只是为了避免最终和不可避免的 再次从 JSX 转换为 JS）。此 DOM 的某些部分将根据某些（if-else）条件生成或对用户可见。在另一种情况下，可能需要一个循环来生成一些 HTML 元素等等。
但是，我找不到任何好的文章来解释没有 JSX 的 React。
因此，请指导并展示如何在没有 JSX 的情况下使用 ReactJS 以及如何使用工厂、类、组件等。
没有足够的文档。
【问题讨论】：
标签： javascript reactjs react-jsx
您似乎知道 JSX 转换为 JS。
所以不要写 JSX ...
// jsx
var data = [1,2,3];
var nodes = <ul>{data.map(function(p,i) {
return <li><Person key={i} id={p} /></li>;
})}</ul>;
只写JS吧！
// js
var data = [1, 2, 3];
var nodes = React.createElement(
"ul",
null,
data.map(function (p, i) {
return React.createElement(
"li",
null,
React.createElement(Person, { key: i, id: p })
);
})
);
【讨论】：
createClass、createFactory、Components 等。何时以及如何使用这些，尤其是在我的场景中。
我使用以下技巧（模仿 React 主页上的第一个示例）：
const __ = Object.assign(React.createElement, React.DOM);
var HelloMessage = React.createClass({
render: function() {
return __.div({}, 'Hello ', this.props.name);
}
});
ReactDOM.render(__(HelloMessage, {name:"John"}), document.getElementById('root'));
以下是所有四个主页示例：
虽然这段代码确实使用了一个不熟悉的习语，但 __. 前缀提供了一个强大的视觉助记符，与 JSX 一样可读。由于没有关闭标签，我会说更具可读性。
【讨论】：
HyperScript Helpers 是一个基于 JavaScript 的选项。
比 createElement 和 JSX 更简洁，但仍然是纯 JavaScript，因此例如使用 JavaScript cmets、数组、对象和函数，
JSX：
<MyComponent className='className'>Hi</MyComponent>
相对于 HyperScript 助手：
MyComponent('.className', ['Hi'])
例如HTML to HyperScript converter。
用法来自React HyperScript Helpers library：
DOM 组件真的很容易使用。只需导入即可。
import { div, h2 } from 'react-hyperscript-helpers';
export default () => div('.foo', [ h2('Hello, world') ]);
对于自定义组件，您可以创建工厂函数或使用 h 函数，类似于 react-hyperscript。
//MyComponent
import { div, hh } from 'react-hyperscript-helpers';
export default hh(() => div('Nifty Component'));
//Container
import MyComponent from './MyComponent';
import SomeOtherComponent from 'who-whats-its';
import { div, h } from 'react-hyperscript-helpers';
export default () => div('.foo', [
MyComponent(),
h(SomeOtherComponent, { foo: 'bar' })
]);
【讨论】：
NoJSX 是基于 JSON 的轻量级替代方案。您可以创建如下所示的树...
- div.container.container--app
-- div.jumbotron
--- h1
--- p
...通过定义用属性表示的元素的树结构，包括children、props 和type。这些反映了React.createElement 的论点。
const pageHeader = {
children: [
{
children: 'Hello World.',
type: 'h1'
},
{
children: 'Foobar.',
type: 'p'
}
],
props: { className: 'jumbotron' },
type: 'div'
};
const templateData = {
children: [
{
props: { title },
type: Helmet
},
pageHeader
],
props: { className: 'container container--app' },
type: 'div'
};
const template = new NoJSX(templateData);
return template.compile();
【讨论】：
【讨论】：
这是我的首选方法：https://github.com/simonrelet/react-pure-html-component-loader
这个组件应该让你编写纯 html 模板作为组件在 react 中使用，而不需要以这种可怕的方式将 HTML 与 javascript 混合。
我看到存储库已经一年没有更新了，所以如果我们希望能够在脚本中不混入可怕的 JSX 的情况下使用 react，这个人需要帮助。
【讨论】：
【讨论】：