在HTML页面中如何使用React
导读：本文共2767字符，通常情况下阅读需要9分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 该方案使用场景：在html页面中使用react，主js文件index.js和其它非react功能使用js模块化的方式开发，适合轻量级中小型应用index.html代码：引入react、react-dom、babel、moment、antd等<!DOCTYPEhtml><htmllang='zh-CN'><head... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。该方案使用场景：在html页面中使用react，主js文件index.js和其它非react功能使用js模块化的方式开发，适合轻量级中小型应用
index.html代码：
引入react、react-dom、babel、moment、antd等
<!DOCTYPEhtml><htmllang='zh-CN'><head><title>ReactinHTML</title><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="libs/antd/antd.min.css"><linkrel="stylesheet"href="css/index.css"><styletype="text/css"></style><scripttype="text/javascript"src="libs/jquery-1.9.1.js"></script><scripttype="text/javascript"src="libs/react/react.production.min.js"></script><scripttype="text/javascript"src="libs/react/react-dom.production.min.js"></script><scripttype="text/javascript"src="libs/babel/babel.min.js"></script><scripttype="text/javascript"src="libs/moment/moment-with-locales.min.js"></script><scripttype="text/javascript"src="libs/antd/antd-with-locales.min.js"></script></head><body><inputid='btn'type="button"class="index-btn"value="显示React组件"/><scripttype="text/babel"src="components/HelloReact.jsx"></script><scripttype="module"src="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{componentcomponentPropscomponentContainerIdconstructor(componentContainerId,component,componentProps){if($('#'+componentContainerId).length==0){$('body').append('<divid="'+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代码：
classHelloReactextendsReact.Component{dateFormat='YYYY-MM-DD'timeFormat='HH:mm:ss'constructor(props){super(props);letnow=newDate().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(){letnow=newDate().valueOf();this.setState({dateStr:moment(now).format(this.dateFormat),timeStr:moment(now).format(this.timeFormat)});}render(){return<divstyle={{display:this.props.isShow?'':'none'}}><h2>Hello{this.props.name},Nowis{this.state.dateStr}{this.state.timeStr}</h2><antd.DatePickeronChange={this.onChangeDate}value={moment(this.state.dateStr,this.dateFormat)}/><antd.TimePickeronChange={this.onChangeTime}value={moment(this.state.timeStr,this.timeFormat)}/><br/><antd.Buttontype="primary"size="default"style={{marginTop:'10px'}}onClick={this.updateDatePickerAndTimePicker}>更新日期时间控件值</antd.Button></div>;}}效果图：
浏览器按F12弹出DevTools，在Sources选项卡中可以看到组件代码，方便打断点调试
遇到的问题：
无法使用es6的import语法导入react组件，es6的import和require.js都不认识jsx
react组件不是按需加载，只适合小型应用
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
在HTML页面中如何使用React的详细内容，希望对您有所帮助，信息来源于网络。