源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 5560|回复: 0

[CSS/Html] 在 HTML 页面中使用 React的场景分析

[复制链接]

1169

主题

1557

帖子

8820

金币

超级版主

Rank: 8Rank: 8

积分
19326
发表于 2022-12-31 20:47:13 | 显示全部楼层 |阅读模式
  1. 本文通过案例场景分析给大家介绍在 HTML 页面中使用 React的代码,react组件不是按需加载,只适合小型应用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
复制代码


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

index.html代码:

引入react、react-dom、babel、moment、antd等
  1. <!DOCTYPE html>
  2. <html lang='zh-CN'>

  3. <head>
  4.     <title>React in HTML</title>

  5.     <meta charset="utf-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">

  8.     <link rel="stylesheet" href="libs/antd/antd.min.css">
  9.     <link rel="stylesheet" href="css/index.css">

  10.     <style type="text/css">

  11.     </style>

  12.     <script type="text/javascript" src="libs/jquery-1.9.1.js"></script>

  13.     <script type="text/javascript" src="libs/react/react.production.min.js"></script>
  14.     <script type="text/javascript" src="libs/react/react-dom.production.min.js"></script>
  15.     <script type="text/javascript" src="libs/babel/babel.min.js"></script>
  16.     <script type="text/javascript" src="libs/moment/moment-with-locales.min.js"></script>
  17.     <script type="text/javascript" src="libs/antd/antd-with-locales.min.js"></script>

  18. </head>

  19. <body>
  20.     <input id='btn' type="button" class="index-btn" value="显示React组件" />

  21.     <script type="text/babel" src="components/HelloReact.jsx"></script>

  22.     <script type="module" src="index.js"></script>
  23. </body>

  24. </html>
复制代码

index.js代码:
  1. import { ReactComponentContainer } from './ReactComponentContainer.js'

  2. let isShow = true;
  3. let helloReactContainer;

  4. $('#btn').on('click', function () {
  5.     if (isShow) {
  6.         helloReactContainer = new ReactComponentContainer('helloReact', HelloReact, { name: 'React' });
  7.         helloReactContainer.show();
  8.         isShow = false;
  9.         $(this).val('隐藏React组件');
  10.     } else {
  11.         helloReactContainer.hide();
  12.         isShow = true;
  13.         $(this).val('显示React组件');
  14.     }
  15. });
复制代码

ReactComponentContainer.js代码:

该模块用于在html中显示隐藏react组件
  1. class ReactComponentContainer {

  2.     component
  3.     componentProps
  4.     componentContainerId

  5.     constructor(componentContainerId, component, componentProps) {
  6.         if ($('#' + componentContainerId).length == 0) {
  7.             $('body').append('<div id="' + componentContainerId + '"></div>');
  8.         }

  9.         this.componentContainerId = componentContainerId;
  10.         this.component = component;
  11.         this.componentProps = componentProps;
  12.     }

  13.     render(isShow) {
  14.         ReactDOM.render(
  15.             React.createElement(
  16.                 antd.ConfigProvider,
  17.                 {
  18.                     locale: antd.locales.zh_CN
  19.                 },
  20.                 React.createElement(this.component, Object.assign({ isShow: isShow }, this.componentProps))
  21.             ),
  22.             document.getElementById(this.componentContainerId)
  23.         );
  24.     }

  25.     show() {
  26.         this.render(true);
  27.     }

  28.     hide() {
  29.         this.render(false);
  30.     }

  31. }

  32. export { ReactComponentContainer }
复制代码

HelloReact.jsx代码:
  1. class HelloReact extends React.Component {
  2.     dateFormat = 'YYYY-MM-DD'
  3.     timeFormat = 'HH:mm:ss'

  4.     constructor(props) {
  5.         super(props);

  6.         let now = new Date().valueOf();

  7.         this.state = {
  8.             dateStr: moment(now).format(this.dateFormat),
  9.             timeStr: moment(now).format(this.timeFormat)
  10.         }

  11.         this.onChangeDate = this.onChangeDate.bind(this);
  12.         this.onChangeTime = this.onChangeTime.bind(this);
  13.         this.updateDatePickerAndTimePicker = this.updateDatePickerAndTimePicker.bind(this);
  14.     }

  15.     onChangeDate(date, dateString) {
  16.         this.setState({ dateStr: dateString });
  17.     }

  18.     onChangeTime(time, timeString) {
  19.         this.setState({ timeStr: timeString });
  20.     }

  21.     updateDatePickerAndTimePicker() {
  22.         let now = new Date().valueOf();
  23.         this.setState({
  24.             dateStr: moment(now).format(this.dateFormat),
  25.             timeStr: moment(now).format(this.timeFormat)
  26.         });
  27.     }

  28.     render() {
  29.         return <div style={{ display: this.props.isShow ? '' : 'none' }}>
  30.             <h1>Hello {this.props.name}, Now is {this.state.dateStr} {this.state.timeStr}</h1>
  31.             <antd.DatePicker onChange={this.onChangeDate} value={moment(this.state.dateStr, this.dateFormat)} />
  32.              
  33.             <antd.TimePicker onChange={this.onChangeTime} value={moment(this.state.timeStr, this.timeFormat)} />
  34.             <br />
  35.             <antd.Button type="primary" size="default" style={{ marginTop: '10px' }} onClick={this.updateDatePickerAndTimePicker} >更新日期时间控件值</antd.Button>
  36.         </div>;
  37.     }
  38. }
复制代码

效果图:



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



遇到的问题:

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

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

Gitee代码地址:

https://gitee.com/s0611163/react-in-html

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

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-16 00:50 , Processed in 0.033375 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明