反应组件未在HTML中显示

2022-02-24 00:00:00 reactjs frontend javascript 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 ),
        ];
    }
}

相关文章