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

程序员文章站 2022-06-04 08:01:53

目录index.html代码：index.js代码：reactcomponentcontainer.js代码：helloreact.jsx代码：遇到的问题：gitee代码地址：总结该方案使用场景：在h...

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/zjvngvn/react-in-html

总结

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

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

目录

index.html代码：

index.js代码：

reactcomponentcontainer.js代码：

helloreact.jsx代码：

遇到的问题：

gitee代码地址：

总结

你知道在springboot中如何使用WebSocket吗

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

HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解

HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解

HTML5中的aside标签怎么用？HTML5aside侧边栏的具体使用方法你知道吗？

你知道怎么在PHP中创建可选参数吗？

HTML5中的header标签是什么意思？HTML5中header标签具体使用方法你知道吗？

HTML5中的aside标签怎么用？HTML5aside侧边栏的具体使用方法你知道吗？

HTML5中的header标签是什么意思？HTML5中header标签具体使用方法你知道吗？

你知道怎么在PHP中创建可选参数吗？