我正在研究如何让 react.js 在网站上运行的教程，但具有讽刺意味的是，我似乎无法在我的网站上运行一段简单的 React 代码。
我知道您必须在标签的最后插入，但即使您将它插入下面也不起作用。我试图用 HTML 示例代码复制 reactjs 集成，但也没有提供任何结果。我还尝试在代码中引用 Jquery。
这是代码的 react 部分:
const e = React.createElement;
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'hammer'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('We have run out of product ' + this.state.value + '. Please try again later.');
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Please choose an item.
<select value={this.state.value} onChange={this.handleChange}>
<option value="hammer">Hammer</option>
<option value="drill">Drill</option>
<option value="saw">Saw</option>
<option value="wrench">Wrench Set</option>
<option value="toolbox">Toolbox</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(Form),
domContainer);
这是在 HTML 中对它的引用:
<body>
<center>
<div class="mainbody">
<div class="header">
The Machine Shop
</div>
<div class="topmenu"></div>
<div class="content">
Welcome to the Machine Shop.
</div>
<div id="root"></div>
</div>
<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>
<script src="form.js"></script>
</center>
</body>
页面本身有效，但 react 部分无效，我已经尝试在每个浏览器中预览代码。
这是完整代码的 codepen.io 代码:https://codepen.io/bigboyopiro/pen/eYObozY
最佳答案
要使您的代码运行，您需要 babel。
因此，对于 codepen.io，请转到 js 选项卡中的设置并将 babel 添加为 Javascript 预处理器。
要使您的代码在网站上运行，请在脚本标签上添加 type="text/babel" 以便 babel 将转译您的脚本代码。
例如
<head>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
...
<body>
.....
</body>
<script type="text/babel">
//react code
</script>
关于javascript - Reactjs 代码未显示在 HTML/CSS 网站中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58058403/