在 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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
JS链式调用的实现方法
Mar 07 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
PHP新手上路(十三)
2006/10/09 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
为数据添加append,remove功能
2006/10/03 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
pycharm的python_stubs问题
2020/04/08 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
聚美优品陈欧广告词
2014/03/14 职场文书
大学生自我鉴定书
2014/03/24 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
管理工程专业求职信
2014/08/10 职场文书
ktv好的活动方案
2014/08/15 职场文书
医院党建工作总结2015
2015/05/26 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers