Я использую React без Node или что-то другое (я не могу его использовать, они попросили меня использовать реакцию таким образом в моей работе … я ничего не могу с этим поделать), я использую файл HTML со ссылками на разные скрипты.

Итак, мне удалось заставить этот код работать:

{amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8" /{amp}gt; {amp}lt;title{amp}gt;Add React in One Minute{amp}lt;/title{amp}gt; {amp}lt;script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;h1{amp}gt;HTML with multiple scripts using React.js{amp}lt;/h1{amp}gt; {amp}lt;p{amp}gt;React.js without Node.js or any other thing{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;React.js is loaded as script tags.{amp}lt;/p{amp}gt; {amp}lt;div id="like_button_container"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div id="like_button_container2"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script src="like_button.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="like_button2.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

like_button.js:

 'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () ={amp}gt; this.setState({ liked: true }) }, 'Like' ); } } const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); 

like_button2.js (да, это H1, а не кнопка, просто тестирование):

 'use strict'; const f = React.createElement; class LikeButton2 extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return f( 'h1', { onClick: () ={amp}gt; this.setState({ liked: true }) }, 'Like' ); } } const domContainer2 = document.querySelector('#like_button_container2'); ReactDOM.render(f(LikeButton2), domContainer2); 

Однако я не могу написать «нормальный» HTML в возвращаемом компоненте, потому что он не будет отображаться и выдаст мне ошибку:

 return f( {amp}lt;div{amp}gt;LOL{amp}lt;/div{amp}gt; ); 

Рис ошибки: https://i.imgur.com/VqxaQof.png

Как я могу решить это? действительно ограничивает и ужасно писать HTMl в кавычках … помните, не может использовать Node или любую другую вещь.

А также, ¿как я могу отрисовать все в одном div? Если я пытаюсь отобразить оба компонента в одном и том же div, он отображает только первый скрипт, но странная часть заключается в том, что один скрипт «знает» о существовании другого (например, не может использовать одно и то же имя для переменных).

Заранее спасибо, я действительно страдаю от этого.

PaulWZ

новый участник этого сайта. Будьте внимательны, спрашивая разъяснения, комментируя и отвечая. Проверьте наш

Правила поведения

,

убрать ф из возврата …..

 return ( {amp}lt;div{amp}gt;LOL{amp}lt;/div{amp}gt; ); 

документация по .createElement находится здесь https://learn.co/lessons/react-create-element

Самая большая проблема заключается в том, что поддержка операторов import ограничена более современными браузерами. Поэтому, если вы хотите сохранить элементы в одном и том же div id="root" , то вам нужно либо определить их в одном файле:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta charset="UTF-8" /{amp}gt; {amp}lt;title{amp}gt;Add React in One Minute{amp}lt;/title{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="root"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script type="application/javascript"{amp}gt; "use strict";function _instanceof(e,t){return null!=t{amp}amp;{amp}amp;"undefined"!=typeof Symbol{amp}amp;{amp}amp;t[Symbol.hasInstance]?!!t[Symbol.hasInstance](e):e instanceof t}function _typeof(e){return(_typeof="function"==typeof Symbol{amp}amp;{amp}amp;"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e{amp}amp;{amp}amp;"function"==typeof Symbol{amp}amp;{amp}amp;e.constructor===Symbol{amp}amp;{amp}amp;e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,t){if(!_instanceof(e,t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var n=0;n{amp}lt;t.length;n  ){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i{amp}amp;{amp}amp;(i.writable=!0),Object.defineProperty(e,i.key,i)}}function _createClass(e,t,n){return t{amp}amp;{amp}amp;_defineProperties(e.prototype,t),n{amp}amp;{amp}amp;_defineProperties(e,n),e}function _possibleConstructorReturn(e,t){return!t||"object"!==_typeof(t){amp}amp;{amp}amp;"function"!=typeof t?_assertThisInitialized(e):t}function _getPrototypeOf(e){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _inherits(e,t){if("function"!=typeof t{amp}amp;{amp}amp;null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t{amp}amp;{amp}amp;t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t{amp}amp;{amp}amp;_setPrototypeOf(e,t)}function _setPrototypeOf(e,t){return(_setPrototypeOf=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var H1LikeButton=function(e){function t(e){var n;return _classCallCheck(this,t),(n=_possibleConstructorReturn(this,_getPrototypeOf(t).call(this,e))).state={isLiked:!1},n.handleClick=n.handleClick.bind(_assertThisInitialized(n)),n}return _inherits(t,React.Component),_createClass(t,[{key:"handleClick",value:function(){this.setState(function(e){return{isLiked:!e.isLiked}})}},{key:"render",value:function(){return React.createElement(React.Fragment,null,this.state.isLiked{amp}amp;{amp}amp;React.createElement("p",null,"This is liked."),React.createElement("h1",{onClick:this.handleClick},!this.state.isLiked?"Like":"Dislike"))}}]),t}(),LikeButton=function(e){function t(e){var n;return _classCallCheck(this,t),(n=_possibleConstructorReturn(this,_getPrototypeOf(t).call(this,e))).state={isLiked:!1},n.handleClick=n.handleClick.bind(_assertThisInitialized(n)),n}return _inherits(t,React.Component),_createClass(t,[{key:"handleClick",value:function(){this.setState(function(e){return{isLiked:!e.isLiked}})}},{key:"render",value:function(){return React.createElement("div",null,this.state.isLiked{amp}amp;{amp}amp;React.createElement("p",null,"This is liked."),React.createElement("button",{onClick:this.handleClick},!this.state.isLiked?"Like":"Dislike"),React.createElement("br",null),React.createElement(H1LikeButton,null))}}]),t}();ReactDOM.render(React.createElement(LikeButton,null),document.getElementById("root")); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

или … вам придется использовать стороннюю библиотеку, которая позволяет импортировать / экспортировать файлы js.

Пример рабочего репо (с использованием requirejs ): https://github.com/mattcarlotta/standalone-requirejs-example

Некоторые инструменты, которые помогут вам: