你知道怎么在 HTML 页面中使用 React吗

更新时间：2022年01月25日 16:43:27 作者：秋荷雨翔

这篇文章主要为大家详细介绍了如何在HTML页面中使用 React，使用使用js模块化的方式开发，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

index.html代码：

引入react、react-dom、babel、moment、antd等

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
    <title>React in HTML</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="libs/antd/antd.min.css">
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
    </style>
    <script type="text/javascript" src="libs/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="libs/react/react.production.min.js"></script>
    <script type="text/javascript" src="libs/react/react-dom.production.min.js"></script>
    <script type="text/javascript" src="libs/babel/babel.min.js"></script>
    <script type="text/javascript" src="libs/moment/moment-with-locales.min.js"></script>
    <script type="text/javascript" src="libs/antd/antd-with-locales.min.js"></script>
</head>
<body>
    <input id='btn' type="button" class="index-btn" value="显示React组件" />
    <script type="text/babel" src="components/HelloReact.jsx"></script>
    <script type="module" src="index.js"></script>
</body>
</html>

index.js代码：

import { ReactComponentContainer } from './ReactComponentContainer.js'
let isShow = true;
let helloReactContainer;
$('#btn').on('click', function () {
    if (isShow) {
        helloReactContainer = new ReactComponentContainer('helloReact', HelloReact, { name: 'React' });
        helloReactContainer.show();
        isShow = false;
        $(this).val('隐藏React组件');
    } else {
        helloReactContainer.hide();
        isShow = true;
        $(this).val('显示React组件');
    }
});

ReactComponentContainer.js代码：

该模块用于在html中显示隐藏react组件

class ReactComponentContainer {
    component
    componentProps
    componentContainerId
    constructor(componentContainerId, component, componentProps) {
        if ($('#' + componentContainerId).length == 0) {
            $('body').append('<div id="' + componentContainerId + '"></div>');
        }
        this.componentContainerId = componentContainerId;
        this.component = component;
        this.componentProps = componentProps;
    }
    render(isShow) {
        ReactDOM.render(
            React.createElement(
                antd.ConfigProvider,
                {
                    locale: antd.locales.zh_CN
                },
                React.createElement(this.component, Object.assign({ isShow: isShow }, this.componentProps))
            ),
            document.getElementById(this.componentContainerId)
        );
    }
    show() {
        this.render(true);
    }
    hide() {
        this.render(false);
    }
}
export { ReactComponentContainer }

HelloReact.jsx代码：

class HelloReact extends React.Component {
    dateFormat = 'YYYY-MM-DD'
    timeFormat = 'HH:mm:ss'
    constructor(props) {
        super(props);
        let now = new Date().valueOf();
        this.state = {
            dateStr: moment(now).format(this.dateFormat),
            timeStr: moment(now).format(this.timeFormat)
        }
        this.onChangeDate = this.onChangeDate.bind(this);
        this.onChangeTime = this.onChangeTime.bind(this);
        this.updateDatePickerAndTimePicker = this.updateDatePickerAndTimePicker.bind(this);
    }
    onChangeDate(date, dateString) {
        this.setState({ dateStr: dateString });
    }
    onChangeTime(time, timeString) {
        this.setState({ timeStr: timeString });
    }
    updateDatePickerAndTimePicker() {
        let now = new Date().valueOf();
        this.setState({
            dateStr: moment(now).format(this.dateFormat),
            timeStr: moment(now).format(this.timeFormat)
        });
    }
    render() {
        return <div style={{ display: this.props.isShow ? '' : 'none' }}>
            <h1>Hello {this.props.name}, Now is {this.state.dateStr} {this.state.timeStr}</h1>
            <antd.DatePicker onChange={this.onChangeDate} value={moment(this.state.dateStr, this.dateFormat)} />
             
            <antd.TimePicker onChange={this.onChangeTime} value={moment(this.state.timeStr, this.timeFormat)} />
            <br />
            <antd.Button type="primary" size="default" style={{ marginTop: '10px' }} onClick={this.updateDatePickerAndTimePicker} >更新日期时间控件值</antd.Button>
        </div>;
    }
}

效果图：

浏览器按F12弹出DevTools，在Sources选项卡中可以看到组件代码，方便打断点调试

遇到的问题：

无法使用es6的import语法导入react组件，es6的import和require.js都不认识jsx

react组件不是按需加载，只适合小型应用

Gitee代码地址：

https://gitee.com/zjvngvn/react-in-html

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

React声明组件的方法总结
这篇文章主要给大家介绍了react声明组件有哪几种方法,各有什么不同,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2023-11-11
react将文件转为base64上传的示例代码
本文主要介绍了react将文件转为base64上传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-09-09
React父组件数据实时更新了,子组件没有更新的问题
这篇文章主要介绍了React父组件数据实时更新了,子组件没有更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React项目经验总结及遇到的坑
这篇文章主要介绍了React项目经验总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
详细谈谈React中setState是一个宏任务还是微任务
学过react的人都知道,setState在react里是一个很重要的方法,使用它可以更新我们数据的状态,下面这篇文章主要给大家介绍了关于React中setState是一个宏任务还是微任务的相关资料,需要的朋友可以参考下
2021-09-09
Remix中mdx table不支持表格解决
这篇文章主要为大家介绍了Remix中mdx table不支持表格问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
关于React动态加载路由处理的相关问题
这篇文章主要介绍了关于React动态加载路由处理的相关问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
react 移动端实现列表左滑删除的示例代码
这篇文章主要介绍了react 移动端实现列表左滑删除的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
react组件memo useMemo useCallback使用区别示例
这篇文章主要为大家介绍了react组件memo useMemo useCallback使用区别的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React-redux实现小案例（todolist）的过程
这篇文章主要为大家详细介绍了React-redux实现小案例（todolist）的过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09