该方案使用场景：在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)} />

            &nbsp;

            <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>;

    }

}

效果图：

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

遇到的问题：

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

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

Gitee代码地址：

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

在 HTML 页面中使用 React的更多相关文章

  1. react用脚手架创建一个react单页面项目，react起手式

    官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10    npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下 ...

  2. 在ASP.NET MVC项目中使用React

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:最近在开发钉钉的微应用,考虑到性能和UI库的支持,遂采用了React来开发前端. 目前 ...

  3. 在项目中使用react

    1. 运行 ’cnpm i react react-dom -S' 安装包 react:专门用于创建组件和虚拟DOM,同时组件的生命周期都在这个包中 react-dom:专门进行DOM操作,主要应用场 ...

  4. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

  5. config.js配置页面中的样式和图片路径

    这个文章用在什么地方,我先说一下,上周啊,我接到一个任务.因为公司业务要对接不同的银行,例如在工行下颜色是红色的,在其他银行下默认为蓝色,所以在页面一致的情况下,保证页面中的按钮和ICON是可以配置的 ...

  6. react18中antd的Upload组件上传头像，并且拿到服务器返回的头像的url地址在页面中显示头像

    业务需求:上传头像,上传完毕后拿到头像的url,把头像展示在页面中,最终把头像url和其他用户信息一起发送给服务器 上传头像流程 导入 Upload 组件和图标(一个加号,一个加载中) import ...

  7. 页面中多个script块之间的关系

     一:函数声明与函数定义表达式在函数调用间的区别 <script type="text/javascript"> doA(); var doA = function(a ...

  8. 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体

    注:本文适用.net 2.0+的winform项目 目的: 点击页面中的target="_blank"链接时,弹出新窗体 页面中有window.close()操作时,关闭窗体 上述 ...

  9. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  10. WEB页面中常见的四种控件的必须的测试

    以下为常规的需求,除非需求有明确说明,如密码输入框中可以输入空格.   输入框 1. 为空,但页面中明确说明不能为空(带有星号或者只有这一个输入框),有以下两种情况: a. 不进行输入或者使其为空:焦 ...

随机推荐

  1. 管易云与网易互客对接集成发货单查询2.0=>编辑订单

    管易云与网易互客对接集成发货单查询2.0=>编辑订单 对接源平台:管易云 管易云是金蝶旗下专注提供电商企业管理软件服务的子品牌,先后开发了C-ERP.EC-OMS.EC-WMS.E店管家.BBC ...

  2. Acwing4244牛的比赛

    Acwing4244.牛的比赛 题目部分 N 头奶牛,编号 1∼N,一起参加比赛. 奶牛的战斗力两两不同. 这些奶牛之间已经进行了 M轮两两对决. 在对决中,战斗力高的奶牛一定会战胜战斗力低的奶牛. ...

  3. games101-2 透视深度插值矫正与抗锯齿分析

    透视深度插值矫正与抗锯齿分析 深度插值的差错原因 透视深度插值公式推导 games101中的错误 msaa与ssaa简要定义 games101中ssaa的实现 games101中msaa的实现 深度插 ...

  4. java中父类方法return this.对象还是变量,子类去调用this.这个方法的问题

    这个问题很简单 public class this_test01 { public static void main(String[] args) { zi j=new zi(); j.pri(); ...

  5. [P7880][Ynoi2006] rldcot

    [Ynoi2006] rldcot 题目描述 给定一棵 \(n\) 个节点的树,树根为 \(1\),每个点有一个编号,每条边有一个边权. 定义 \(dep(x)\) 表示一个点到根简单路径上边权的和, ...

  6. [ABC266G] Yet Another RGB Sequence

    Problem Statement You are given integers $R$, $G$, $B$, and $K$. How many strings $S$ consisting of ...

  7. k8s安装Ingress-Nginx

    目前,DHorse(https://gitee.com/i512team/dhorse)只支持Ingress-nginx的Ingress实现,下面介绍Ingress-nginx的安装过程. 下载安装文 ...

  8. 分布式文件系统HDFS简介

    HDFS实现目标: 兼容廉价的硬件设备    支持大数据集   实现流数据读写   支持简单的文件模型    强大的跨平台兼容性 自身的局限性: 不适合低延迟的数据访问   无法高效储存大量小文件  ...

  9. 文心一言 VS 讯飞星火 VS chatgpt （160）-- 算法导论12.4 2题

    二.用go语言,请描述这样一棵有 n 个结点的二叉搜索树,其树中结点的平均深度为 O(lgn),但这棵树的高度是w(lgn).一棵有 n个结点的二叉搜索树中结点的平均深度为 O(lgn),给出这棵树高 ...

  10. Javascript面向对象的程序设计 —— 创建自定义类型的7种方法

    Object构造函数或对象字面量都可以用来创建单个对象,但是使用这些方式用同一个接口创建很多对象,会产生大量的重复代码.为了解决这个问题,工厂模式的一种变体开始被使用.1.工厂模式工厂模式抽象了创建具 ...