我是 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);
最佳答案
你想在没有 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”的语法创建 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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb998e8a889fc680849b9b879e858cab9dc5dbc5dac5db" rel="noreferrer noopener nofollow">[email protected]</a>/ReactKopplung.js"></script>
<div id="menu_js"></div>
关于javascript - 插入 HTML 的 React 代码似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60685419/