我正在使用没有 Node 的 React 或任何其他东西（我不能使用它，他们要求我在我的工作中以这种方式使用 React...我无能为力），我正在使用一个 HTML 文件，其中包含对不同的脚本。
所以，我设法使这段代码工作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<h1>HTML with multiple scripts using React.js</h1>
<p>React.js without Node.js or any other thing</p>
<p>React.js is loaded as script tags.</p>
<div id="like_button_container"></div>
<div id="like_button_container2"></div>
<script src="like_button.js"></script>
<script src="like_button2.js"></script>
</body>
</html>
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: () => 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: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer2 = document.querySelector('#like_button_container2');
ReactDOM.render(f(LikeButton2), domContainer2);
但是，我不能在组件的返回中编写“普通”HTML，因为它不会呈现并且会给我一个错误：
return f(
<div>LOL</div>
);
错误图片：https : //i.imgur.com/VqxaQof.png
我该如何解决这个问题？在引号内写 HTMl 真的很有限而且很糟糕……记住，不能使用 Node 或任何其他东西。
而且，¿如何在同一个 div 中渲染所有内容？如果我尝试在同一个 div 上渲染两个组件，它只会渲染第一个脚本，但奇怪的是一个脚本“知道”另一个脚本的存在（例如，不能对变量使用相同的名称）。
提前谢谢你，我真的很痛苦。