在 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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
vue自定义指令实现方法详解
Feb 11 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python AES加密实例解析
2018/01/18 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
Python requests设置代理的方法步骤
2020/02/23 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
HEMA法国:荷兰原创设计
2019/02/21 全球购物
运动会广播稿400字
2014/01/25 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS