我是 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);
2 回答
慕虎7371278
TA貢獻1802條經驗 獲得超4個贊
你想在沒有 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>
PS 我正在開發一個庫，它允許您在沒有 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/[email protected]/ReactKopplung.js"></script>
<div id="menu_js"></div>
largeQ
TA貢獻2039條經驗 獲得超8個贊
您不需要整個類來渲染一個簡單的元素：
const Menu = React.createElement('h1', {}, 'Hello World!');
ReactDOM.render(Menu, document.getElementById('menu_js'));
- 2 回答
- 0 關注
- 112 瀏覽
添加回答
舉報
0/150
提交
取消