javascript - 插入 HTML 的 react 代码似乎不起作用

Question

我是 React 的新手，我真的不知道如何让它工作。
我只是想在我的 HTML 中添加这个简单的代码，但它似乎不起作用，我不知道为什么

这是我的代码

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return <h1>Hello World! < /h1>
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

Answer 1

你想在没有 JSX 的情况下做到吗？没有 JSX 意味着你不需要 Babel 等。

我假设这个，只是因为你设置了一个函数React.createElement .

如果是这样，你可以这样做:

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return element('h1',null,'Hello World!');
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="menu_js"></div>

或者- 如果你想使用 JSX

然后你可以这样做(只需启用 Babel):

const element = React.createElement;
class Menu extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="menu_js"></div>

附言我正在开发一个库，它允许您在没有 JSX 和“d3-like”语法的情况下创建 react 元素。 ( https://github.com/Alex-ley/react-kopplung )

如果您有兴趣，您的示例可能如下所示:

const element = React.createElement;
class Menu extends React.Component {
  render() {
    const returnObj = new ReactKopplung();    
    returnObj
      .setRoot('h1') /* Or .setRoot('<>') for a fragment */
        .setText('hello world!');
            
    return returnObj.rootNode().render();
  }
}
const domContainer = document.querySelector('#menu_js');
ReactDOM.render(element(Menu), domContainer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Alex-ley/react-kopplung@v.0.1.0/ReactKopplung.js"></script>
<div id="menu_js"></div>