在HTML页面中如何使用React

这篇文章主要介绍了在HTML页面中如何使用React的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇在HTML页面中如何使用React文章都会有所收获，下面我们一起来看看吧。

该方案使用场景：在html页面中使用react，主js文件index.js和其它非react功能使用js模块化的方式开发，适合轻量级中小型应用

index.html代码：

引入react、react-dom、babel、moment、antd等

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('
');        }        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 
            
Hello {this.props.name}, Now is {this.state.dateStr} {this.state.timeStr}
                                                 
            更新日期时间控件值        
;    }}

效果图：

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

遇到的问题：

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

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

关于"在HTML页面中如何使用React"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"在HTML页面中如何使用React"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。