你知道怎么在 HTML 页面中使用 React吗

目录
  • index.html代码：
  • index.js代码：
  • ReactComponentContainer.js代码：
  • HelloReact.jsx代码：
  • 遇到的问题：
  • Gitee代码地址：
  • 总结

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

效果图：

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

遇到的问题：

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

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

Gitee代码地址：

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 教你如何从 html 实现一个 react

    教你如何从 html 实现一个 react

    什么是 React React是一个简单的javascript UI库,用于构建高效.快速的用户界面.它是一个轻量级库,因此很受欢迎.它遵循组件设计模式.声明式编程范式和函数式编程概念,以使前端应用程序更高效.它使用虚拟DOM来有效地操作DOM.它遵循从高阶组件到低阶组件的单向数据流. 前言

  • React html中使用react的两种方式

    基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</title> </head>

  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let richText = ' <p style="font-size: 25px;color: white">       sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富

  • 你知道怎么在 HTML 页面中使用 React吗

    你知道怎么在 HTML 页面中使用 React吗

    目录 index.html代码: index.js代码: ReactComponentContainer.js代码: HelloReact.jsx代码: 遇到的问题: Gitee代码地址: 总结 该方案使用场景:在html页面中使用react,主js文件index.js和其它非react功能使用js模块化的方式开发,适合轻量级中小型应用 index.html代码: 引入react.react-dom.babel.moment.antd等 <!DOCTYPE html> <html lan

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • asp.net 使用驻留在页面中的Cache缓存常用可定时更新的数据

    就是希望让Web应用程序从一开始运行到结束都一直存在,有人就说为什么不用Application呢?其实Cache是可以一段时间内自动更新数据的,而Application就无法做成这样的,另外Application在Web这种高并发的系统中一定要考虑线程安全的问题,Application本身就不是线程安全的,而Cache就是线程安全.所以一般我都会在很多对象中我只从Web开始运行的时候从数据库或文件里获取一次数据,在不同的页面中,都是使用Cache的,而且Cache中的数据可能弄成自动更新的,所以

  • asp.net下遍历页面中所有的指定控件的代码

    1.遍历页面中所有的TextBox,并将值设置成String.Empty 复制代码 代码如下: for (int j = 0; j < this.Controls.Count; j++) { foreach (object o in Page.Controls[j].Controls) { if (o is TextBox) { TextBox txt = (System.Web.UI.WebControls.TextBox)o; txt.Text = String.Empty; } } } 2

  • jsp页面中如何将时间戳字符串格式化为时间标签

    datetag.tld文件: <?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd"> <tagli

  • jsp页面中表达式语言中的$符号不起作用的解决方法

    今天myeclipse里部署了之前做的一个测试项目,发现jsp里的$符号tomcat启动后页面上显示出来了,百度搜了下别人也有类似的问题出现过.经提醒原来是web.xml配置的version设置的是2.5而我tomcat5启动的.是tomcat的版本低于web的版本,从而导致$符号不能正常使用. 后将tomcat5改用tomcat6.jdk采用1.6 启动spring2.5项目.$显示问题解决. 以下是网上摘录的详细说明: 在jsp页面中用表达式语言中的$符号,如${pageScope.titl

  • VBScript教程 第二课在HTML页面中添加VBscript代码

    VB教程 > 第二课在HTML页面中添加VBscript代码 SCRIPT 元素用于将 VBScript 代码添加到 HTML 页面中. <SCRIPT> 标记 VBScript 代码写在成对的 <SCRIPT> 标记之间.例如,以下代码为一个测试传递日期的过程: <SCRIPT LANGUAGE="VBScript"> <!--Function CanDeliver(Dt)CanDeliver = (CDate(Dt) - Now())

  • Javscript调用iframe框架页面中函数的方法

    本文实例讲述了在Javscript调用iframe框架页面中函数的方法,这个调用方法其实非常的简单,有了这个方法我们就可以实现iframe之间传值或修改值了,操作起来都非常的简单.分享给大家供大家参考.具体实现方法如下: 访问iframe里面的函数: 复制代码 代码如下: document.getElementById('commentIframe').contentWindow.hasLogined(); commentIframe为iframe的id. 要在 window.onload里面执

  • 使用JavaScript实现在页面中显示距离2017年中秋节的天数

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在页面中显示距离2017年中秋节的天数</title> <script type="text/javascript"> function countdown(title,Intime,divI

  • javascript标签在页面中的位置探讨

    在制作网页的过程中,我们经常写类似下面的代码: [html] 复制代码 代码如下: <html> <head> <title>Example HTML Page</title> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src=&qu

随机推荐