反应组件未在HTML中显示 [英] React Component not displayed in HTML
本文介绍了反应组件未在HTML中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在学习反应，无法显示我的组件。
我有一个包含以下代码的欢迎html文件：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://thymeleaf.org"><head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script type = "text/babel" src= "App.js"> </script>
<script>
import {Component} from "react";
class App extends Component {
render() {
return(
<h1>Hello everyone nice to see it finally works!!!</h1>)
}
}
ReactDOM.render(<App />, document.querySelector(".root"));</script>
</body>
</html>这是我的App.js
import React, {Component} from 'react'
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
name: '',
appVersion: ''
}
}
render(){
return(
<h1>Hello everyone nice to see it finally works!!!</h1>
)
}
}注意：在我的App.js不起作用后，我尝试使用html文件的内联组件，如您所见。但即使这样也无济于事。希望有人能给我一点提示。
推荐答案
我认为将外部脚本(<script src="...">)与浏览器内的babel转发器(但不确定)一起使用是不起作用的。
它可以与
- JSX和内联代码，或
- 没有JSX的外部脚本
最常用的方法是创建一个包含webpack、服务器、巴别塔等的node.js项目，例如create-react-app。
1.JSX和内联代码
此处您不需要(也不能使用)import。
React已由<script ...>标记导入到全局作用域。要使用Component，您可以改用React.Component：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return(
<h1>Hello everyone nice to see it finally works!!!</h1>
);
}
}
ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>
2.外部脚本，不带JSX
导入<script src="app.js">显然只有在app.js中没有JSX(即没有babel转换器)才有效，因为CORS有限制：
// index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script src="app.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>
// app.js
class App extends React.Component {
constructor( props ){
super(props);
this.state = {
name: 'some name',
appVersion: ''
};
}
render(){
return [
React.createElement( 'h1', null, 'it works, but without JSX! ' ),
React.createElement( 'p', null, 'Name: ' + this.state.name ),
];
}
}
这篇关于反应组件未在HTML中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
