插入 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 {&nbsp; render() {&nbsp; &nbsp; return element('h1',null,'Hello World!');&nbsp; }}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 {&nbsp; render() {&nbsp; &nbsp; return <h1>Hello World!</h1>;&nbsp; }}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>PS 我正在开发一个库，它允许您在没有 JSX 的情况下使用“类似 d3”的语法创建 React 元素。（https://github.com/Alex-ley/react-kopplung）如果您有兴趣，您的示例可能如下所示：const element = React.createElement;class Menu extends React.Component {&nbsp; render() {&nbsp; &nbsp; const returnObj = new ReactKopplung();&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; returnObj&nbsp; &nbsp; &nbsp; .setRoot('h1') /* Or .setRoot('<>') for a fragment */&nbsp; &nbsp; &nbsp; &nbsp; .setText('hello world!');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return returnObj.rootNode().render();&nbsp; }}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>

Answer 2

您不需要整个类来渲染一个简单的元素：const Menu = React.createElement('h1', {}, 'Hello World!');ReactDOM.render(Menu, document.getElementById('menu_js'));