在 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 相关文章推荐
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 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实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
php中使用websocket详解
2016/09/23 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
Python如何定义一个函数
2015/09/01 面试题
大专自我鉴定范文
2013/10/23 职场文书
给护士表扬信
2014/01/19 职场文书
旷课检讨书3000字
2014/02/04 职场文书
成绩单公证书
2014/04/10 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers