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

第

你知道怎么在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等

!DOCTYPEhtml

htmllang=zh-CN

head

titleReactinHTML/title

metacharset=utf-8/

metahttp-equiv=X-UA-Compatiblecontent=IE=edge

metaname=viewportcontent=width=device-width,initial-scale=1

linkrel=stylesheethref=libs/antd/antd.min.css

linkrel=stylesheethref=css/index.css

styletype=text/css

/style

scripttype=text/javascriptsrc=libs/jquery-1.9.1.js/script

scripttype=text/javascriptsrc=libs/react/duction.min.js/script

scripttype=text/javascriptsrc=libs/react/duction.min.js/script

scripttype=text/javascriptsrc=libs/babel/babel.min.js/script

scripttype=text/javascriptsrc=libs/moment/moment-with-locales.min.js/script

scripttype=text/javascriptsrc=libs/antd/antd-with-locales.min.js/script

/head

body

inputid=btntype=buttonvalue=显示React组件/

scripttype=text/babelsrc=components/HelloReact.jsx/script

scripttype=modulesrc=index.js/script

/body

/html

index.js代码：

import{ReactComponentContainer}from./ReactComponentContainer.js

letisShow=true;

lethelloReactContainer;

$(#btn).on(click,function(){

if(isShow){

helloReactContainer=newReactComponentContainer(helloReact,HelloReact,{name:React});

helloReactContainer.show();

isShow=false;

$(this).val(隐藏React组件);

}else{

helloReactContainer.hide();

isShow=true;

$(this).val(显示React组件);

});

ReactComponentContainer.js代码：

该模块用于在html中显示隐藏react组件

classReactComponentContainer{

component

componentProps

componentContainerId

constructor(componentContainerId,component,componentProps){

if($(#+componentContainerId).length==0){

$(body).append(divid=+componentContainerId+/div