在 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 相关文章推荐
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
Oct 26 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
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生成EAN_13标准条形码实例
2013/11/13 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
ext 代码生成器
2009/08/07 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
python实现名片管理系统
2018/11/29 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python opencv实现图片缺陷检测(讲解直方图以及相关系数对比法)
2020/04/07 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
医院后勤自我鉴定
2013/10/13 职场文书
教师专业理论水平的自我评价分享
2013/11/09 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
销售员岗位职责
2014/06/09 职场文书
七一讲话心得体会
2014/09/05 职场文书
出纳岗位职责范本
2015/03/31 职场文书
公司奖励通知
2015/04/21 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书