在 HTML 页面中使用 React的场景分析


Posted in Javascript onJanuary 18, 2022

该方案使用场景:在html页面中使用react,主js文件index.js和其它非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>;
    }
}

效果图:

在 HTML 页面中使用 React的场景分析

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

在 HTML 页面中使用 React的场景分析

遇到的问题:

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

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

Gitee代码地址:

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

到此这篇关于在 HTML 页面中使用 React的文章就介绍到这了,更多相关html使用react内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JavaScript中EventLoop介绍
Jan 22 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
js实现时分秒倒计时
Dec 03 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
React自定义hook的方法
Jun 25 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
浅谈JavaScript作用域
Dec 06 #Javascript
JavaScript流程控制(循环)
Dec 06 #Javascript
JavaScript流程控制(分支)
Dec 06 #Javascript
JavaScript实现队列结构过程
Dec 06 #Javascript
JavaScript实现栈结构详细过程
Dec 06 #Javascript
JavaScript实现优先级队列
Dec 06 #Javascript
You might like
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php中文验证码实现方法
2015/06/18 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
Vue与React的区别和优势对比
2020/12/18 Vue.js
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python 队列详解及实例代码
2016/10/18 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
python的launcher用法知识点总结
2020/08/07 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
优秀学生干部个人的自我评价
2013/10/04 职场文书
前台领班岗位职责
2013/12/04 职场文书
任命书格式
2014/06/05 职场文书
分公司任命书
2014/06/06 职场文书
初中作文评语
2014/12/25 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers