Реактивный код для вставки HTML не работает - PullRequest
Новая
       4

Реактивный код для вставки HTML не работает

2 голосов
/ 14 марта 2020

Я новичок в 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 ]

2 голосов
/ 14 марта 2020

Хотите сделать это без JSX? Без JSX означает, что вам не нужен Babel et c.

Я предполагаю это, только потому, что вы настроили функцию для 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-like". (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>
0 голосов
/ 14 марта 2020

Вам не нужен целый класс для отображения простого элемента: 

const Menu = React.createElement('h1', {}, 'Hello World!');

ReactDOM.render(Menu, document.getElementById('menu_js'));
...