在 HTML 页面中使用 React的场景分析

  发布时间:2021-12-15 08:56:36   作者:佚名   我要评论
本文通过案例场景分析给大家介绍在 HTML 页面中使用 React的代码,react组件不是按需加载,只适合小型应用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

该方案使用场景:在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/s0611163/react-in-html

到此这篇关于在 HTML 页面中使用 React的文章就介绍到这了,更多相关html使用react内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • 在 HTML 页面中使用 React的场景分析

    本文通过案例场景分析给大家介绍在 HTML 页面中使用 React的代码,react组件不是按需加载,只适合小型应用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考
    2021-12-15
  • HTML怎么设置下划线?html文字加下划线方法

    下划线被认为是引起人们对文本注意的一种方式,那么HTML怎么设置下划线?html文字加下划线方法?具有一定的参考价值,感兴趣的可以了解一下
    2021-12-03
  • Unicode中的CJK(中日韩统一表意文字)字符小结

    CJK,是CJK Unified Ideographs的缩写,意思是“中日韩统一表意文字”,把分别来自中文、日文、韩文、越文中,本质、意义相同、形状一样或稍异的表意文字赋予相同编码,其
    2021-11-27
  • Unicode中的常用字母小结

    最早的计算机大多只能使用ASCII字符,后来逐渐扩展到主要的西文字母,有了Unicode后,各种文字的字母都已被纳入其中,包括很多古代使用的字母,可以用于考古学领域了。但最
    2021-11-27
  • Unicode中的数学符号小结

    数学、物理及一些科技领域使用了很多特殊符号,Unicode码中都有对应的码位,列出其码表,以方便使用
    2021-11-27
  • Unicode中的常用符号

    Unicode是国际组织制定的可以容纳世界上所有文字和符号的字符编码方案,所以包容万象,使用Unicode符号可以在网页上直接显示一些常用的符号,比如箭头、表情等
    2021-11-27
  • html网页中使用希腊字母的方法

    希腊字母是很常用的一系列符号,特别是在数学、物理等科技领域,经常要使用来表示特定含义的常量或变量
    2021-11-27
  • HTML汉字编码标准介绍

    这篇文章主要介绍了HTML汉字编码标准介绍,需要的朋友可以参考下
    2021-11-27
  • HTML基础详解(下)

    本文主要介绍了HTML基础知识,HTML指的是超文本标记语言,它不是一种编程语言,而是一种标记语言。需要具体了解HTML的小伙伴可以参考一下这篇文章哦
    2021-10-13
  • HTML基础详解(上)

    本文主要介绍了HTML基础知识,HTML指的是超文本标记语言,它不是一种编程语言,而是一种标记语言。需要具体了解HTML的小伙伴可以参考一下这篇文章哦
    2021-10-13

最新评论