作者：葡萄城控SpreadJS最好的特性之一就是可以在不同的框架中使用。本文将演示如何使用BabelJavaScript编译器在一个简单的网页中快速将SpreadJS与React集成。第一步：设置HTML5页面首先，我们需要在页面中添加对React的引用：
SpreadJSReactDemo</标题></head></html>在此页面中，我们将使用Babel的预编译版本（称为babel-standalone），因此我们'我还将添加对此的引用：最后，添加对Spread.Sheets的引用：<linkrel="stylesheet"类型="text/css"href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.0.css">在我们写任何脚本之前，我们需要定义包含Spread实例的DIV元素。我们称之为“根”。<divid="root"></div>第2步：为Spread.Sheets创建一个React类接下来，向页面添加一个脚本元素。我们将把所有代码放在这里：然后，为Spread.Sheets定义一个React组件，这样我们就可以定义一个扩展React.Component的类：classReactSpreadJSextendsReact.Component{}这个类需要在里面定义componentDidMount和render函数。componentDidMount函数在组件挂载后立即被调用，所以我们用它来初始化Spread实例：让spread=newGC.Spread.Sheets.Workbook(this.refs.spreadJs,{sheetCount:3});如果（this.props.workbookInitialized）{this.props.workbookInitialized（传播）；接下来，在render函数中定义Spread.SheetsDOM元素in:render(){//定义Spread.SheetsDOM模板return(<divref="spreadJs"style={{width:'100%',高度：'100%'}}></div>);}第三步：为组件创建应用类首先，通过App类定义应用React组件：//Definetheapplicationreactcomponent.classAppextendsReact.Component{}接下来，添加一个你将调用ReactSpreadJS组件的renderfunction:render(){//在根组件中，包含一个ReactSpreadJS组件。return(<divstyle={{width:'800px',height:'600px'}}><ReactSpreadJSworkbookInitialized={(spread)=>{console.log(spread)}}></ReactSpreadJS></div>)}要完成脚本，告诉React使用ReactDOM.render初始化应用程序：ReactDOM.render(//主入口，初始化应用程序react组件。<App/>,document.getElementById('root'));这就是您使用React将Spread.Sheets添加到您的HTML页面所需的全部这只是React和Spread.Sheets的基本用法，但可以轻松扩展。关于SpreadJS前端表格控件SpreadJS纯前端表格控件是一个基于HTML5的JavaScript电子表格和网格函数控件，适用于.NET、Java、Web等各种平台的表格数据处理和类Excel功能表格应用程序和移动终端程序开发。全中文操作界面，零学习成本！方便您在系统开发过程中更安全地管理Excel数据，更快捷地完成海量数据交互，进行数据导出、导入、排序、筛选、增删改查、Excel导入等操作/导出更方便。自上线以来，SpreadJS得到了华为、中通、中国民航飞行学院、中国平安、中国能建、浪潮等国内知名企业客户的青睐。</p>
</div>
</div>
<div class="zuowen_sxy">
<div class="prev">上一篇：<a title="CSSGrid响应式网页布局-W3Schools视频03" href="/webqianduan/245336.html">CSSGrid响应式网页布局-W3Schools视频03</a> </div>
<div class="prev">下一篇：<a title="2020年vue最新特性汇总，都在这里" href="/webqianduan/245338.html">2020年vue最新特性汇总，都在这里</a> </div>
</div>
<div class="related_about">
<div class="related_about_t"><code>纯干货分享：如何在React框架中使用SpreadJS相关文章</code></div>
<ul>
<li><a href="/kejifunen/361752.html" target="_blank" title="酒类营销新模式，豆开分享新零售红利">酒类营销新模式，豆开分享新零售红利</a></li>
<li><a href="/kejifunen/361647.html" target="_blank" title="深度解读Waymo-景驰纯无人驾驶汽车路测应用！配备L4，发">深度解读Waymo-景驰纯无人驾驶汽车路测应用！配备L4，发</a></li>
<li><a href="/kejifunen/361093.html" target="_blank" title="B&O 发布最新无线智能耳机，纯羊皮材质">B&O 发布最新无线智能耳机，纯羊皮材质</a></li>
<li><a href="/kejifunen/360449.html" target="_blank" title="【评测】初体验入门级VR设备！灵境小白经验分享">【评测】初体验入门级VR设备！灵境小白经验分享</a></li>
<li><a href="/kejifunen/360014.html" target="_blank" title="余永福分享六点秘诀！明年可穿戴设备厂商将尸横遍野">余永福分享六点秘诀！明年可穿戴设备厂商将尸横遍野</a></li>
<li><a href="/kejifunen/359891.html" target="_blank" title="干货！物联网卡如何在智能可穿戴设备中使用">干货！物联网卡如何在智能可穿戴设备中使用</a></li>
<li><a href="/kejifunen/359826.html" target="_blank" title="VEZ BOX智能投影分享！小人物也能有所作为">VEZ BOX智能投影分享！小人物也能有所作为</a></li>
<li><a href="/kejifunen/359765.html" target="_blank" title="诸葛IO孔淼受邀参加中国创新发展创业生态论坛分享精益创业经验">诸葛IO孔淼受邀参加中国创新发展创业生态论坛分享精益创业经验</a></li>
<li><a href="/kejifunen/359674.html" target="_blank" title="解密K.Band智能手环的纯净与杂质">解密K.Band智能手环的纯净与杂质</a></li>
<li><a href="/kejifunen/359257.html" target="_blank" title="周鸿祎分享童年照片，将推出3799元高端儿童手表？ ">周鸿祎分享童年照片，将推出3799元高端儿童手表？ </a></li>
<li><a href="/kejifunen/358758.html" target="_blank" title="飞利浦“醛”净化力，守护空气如初恋般纯净">飞利浦“醛”净化力，守护空气如初恋般纯净</a></li>
<li><a href="/kejifunen/358465.html" target="_blank" title="【干货信息】Apple Watch 用户画像 Apple W">【干货信息】Apple Watch 用户画像 Apple W</a></li>
<li><a href="/kejifunen/358207.html" target="_blank" title="分享美食，“足球之夜，你有一支才华横溢的球队”">分享美食，“足球之夜，你有一支才华横溢的球队”</a></li>
<li><a href="/kejifunen/357952.html" target="_blank" title="【干货】2017年电子消费科技产品前景详解">【干货】2017年电子消费科技产品前景详解</a></li>
<li><a href="/kejifunen/357783.html" target="_blank" title="纯原色重新定义想象，TCL X5原色量子点电视全方位评测">纯原色重新定义想象，TCL X5原色量子点电视全方位评测</a></li>
<li><a href="/kejifunen/357643.html" target="_blank" title="单动圈纯监听——森海塞尔IE40 Pro评测">单动圈纯监听——森海塞尔IE40 Pro评测</a></li>
<li><a href="/kejifunen/357244.html" target="_blank" title="智能控制蒸发，无白色粉末，体验智米纯净加湿器">智能控制蒸发，无白色粉末，体验智米纯净加湿器</a></li>
<li><a href="/kejifunen/357041.html" target="_blank" title="周鸿祎！人工智能存在泡沫，纯AI没有商业模式">周鸿祎！人工智能存在泡沫，纯AI没有商业模式</a></li>
<li><a href="/kejifunen/356770.html" target="_blank" title="品钛总裁周静分享2018 RISE技术大会！科技赋能金融，未">品钛总裁周静分享2018 RISE技术大会！科技赋能金融，未</a></li>
<li><a href="/kejifunen/356753.html" target="_blank" title="【干货资讯】可穿戴技术十大亮点解读">【干货资讯】可穿戴技术十大亮点解读</a></li>
</ul>
</div>
</div>
<div class="main-right">
<div class="right_fix">
<div class="r_con">
<div class="r_title">最新推荐</div>
<ul>
<li><em>1</em><a href="/kejifunen/371237.html" title="AutoML技术挑战与发展，知乎科技下分CCDM2018分享" target="_blank">AutoML技术挑战与发展，知乎科技下分CCDM2018分享</a></li>
<li><em>2</em><a href="/kejifunen/371129.html" title="难得一见的清华深度学习课程！我们“偷”了全套干货" target="_blank">难得一见的清华深度学习课程！我们“偷”了全套干货</a></li>
<li><em>3</em><a href="/kejifunen/370885.html" title="如何拍摄纯黑白照片？一台华为P20 Pro就够了" target="_blank">如何拍摄纯黑白照片？一台华为P20 Pro就够了</a></li>
<li><em>4</em><a href="/kejifunen/370364.html" title="纯手工木质Apple Watch表带" target="_blank">纯手工木质Apple Watch表带</a></li>
<li><em>5</em><a href="/kejifunen/370211.html" title="【全面干货盘点】CES2016！目不暇接 你错过了什么“黑科" target="_blank">【全面干货盘点】CES2016！目不暇接 你错过了什么“黑科</a></li>
<li><em>6</em><a href="/kejifunen/370194.html" title="分享提高可穿戴设备电池续航时间的方法" target="_blank">分享提高可穿戴设备电池续航时间的方法</a></li>
<li><em>7</em><a href="/kejifunen/370079.html" title="【干货资讯】如何打造一款完美的智能手表" target="_blank">【干货资讯】如何打造一款完美的智能手表</a></li>
<li><em>8</em><a href="/kejifunen/369688.html" title="【干货】2016年可穿戴设备技术发展全梳理" target="_blank">【干货】2016年可穿戴设备技术发展全梳理</a></li>
<li><em>9</em><a href="/kejifunen/369094.html" title="腕上科技经典HUAWEI WATCH深度体验分享" target="_blank">腕上科技经典HUAWEI WATCH深度体验分享</a></li>
<li><em>10</em><a href="/kejifunen/368666.html" title="【干货资讯】全面讲解！你真的了解VR行业吗？ " target="_blank">【干货资讯】全面讲解！你真的了解VR行业吗？ </a></li>
</ul>
</div>
<div class="r_con">
<div class="r_title">猜你喜欢</div>
<ul class="you_like">
<li><em>1</em><a href="/kejifunen/368022.html" title="体验产品分享专家的拍摄体验 智云稳定器参加BIRTV2018" target="_blank">体验产品分享专家的拍摄体验 智云稳定器参加BIRTV2018</a></li>
<li><em>2</em><a href="/kejifunen/367617.html" title="青云青云受邀出席山东CIO高峰论坛分享云网融合驱动数字化转型" target="_blank">青云青云受邀出席山东CIO高峰论坛分享云网融合驱动数字化转型</a></li>
<li><em>3</em><a href="/kejifunen/367583.html" title="百度地图举办“LBS+AI”沙龙，分享语音AR等核心技术，全" target="_blank">百度地图举办“LBS+AI”沙龙，分享语音AR等核心技术，全</a></li>
<li><em>4</em><a href="/kejifunen/367464.html" title="腾讯电脑管家纯净版上线，权限雷达助力软件行为“完全受控”" target="_blank">腾讯电脑管家纯净版上线，权限雷达助力软件行为“完全受控”</a></li>
<li><em>5</em><a href="/kejifunen/367343.html" title="【干货】国人使用和购买可穿戴设备背后的七大秘密" target="_blank">【干货】国人使用和购买可穿戴设备背后的七大秘密</a></li>
<li><em>6</em><a href="/kejifunen/367276.html" title="腾讯智慧安全亮相2018网络安全年会，分享医疗机构数据安全建" target="_blank">腾讯智慧安全亮相2018网络安全年会，分享医疗机构数据安全建</a></li>
<li><em>7</em><a href="/kejifunen/367250.html" title="索尼NW-WS414玩家体验评测！纯粹的耳机播放器！ " target="_blank">索尼NW-WS414玩家体验评测！纯粹的耳机播放器！ </a></li>
<li><em>8</em><a href="/kejifunen/367183.html" title="Ticwatch智能手表体验分享！智能穿戴行业的黑老大" target="_blank">Ticwatch智能手表体验分享！智能穿戴行业的黑老大</a></li>
<li><em>9</em><a href="/kejifunen/366908.html" title="分享服务机器人行业现状" target="_blank">分享服务机器人行业现状</a></li>
<li><em>10</em><a href="/kejifunen/365905.html" title="WeLoop小黑2开箱体验分享！就是为了给大家好看" target="_blank">WeLoop小黑2开箱体验分享！就是为了给大家好看</a></li>
<li><em>11</em><a href="/kejifunen/365845.html" title="未来5-10年虚拟现实将进入黄金时代（附分享）" target="_blank">未来5-10年虚拟现实将进入黄金时代（附分享）</a></li>
<li><em>12</em><a href="/kejifunen/365426.html" title="世界杯观赛体验！三星QLED电视纯粹享受" target="_blank">世界杯观赛体验！三星QLED电视纯粹享受</a></li>
<li><em>13</em><a href="/kejifunen/365131.html" title="【干货信息】挑战与机遇并存，看看国内虚拟现实行业的现状" target="_blank">【干货信息】挑战与机遇并存，看看国内虚拟现实行业的现状</a></li>
<li><em>14</em><a href="/kejifunen/364911.html" title="比利时晋级半决赛，长虹与网友分享“红魔”的激情" target="_blank">比利时晋级半决赛，长虹与网友分享“红魔”的激情</a></li>
<li><em>15</em><a href="/kejifunen/364404.html" title="小米在香港联交所上市！雷军分享了11年前金山软件上市的老照片" target="_blank">小米在香港联交所上市！雷军分享了11年前金山软件上市的老照片</a></li>
<li><em>16</em><a href="/kejifunen/363511.html" title="本文分享屏下指纹的原理和使用技巧，帮助你快速成为老手" target="_blank">本文分享屏下指纹的原理和使用技巧，帮助你快速成为老手</a></li>
<li><em>17</em><a href="/kejifunen/363098.html" title="搜狐AI分享会！未来7年，AI将率先落地工业场景" target="_blank">搜狐AI分享会！未来7年，AI将率先落地工业场景</a></li>
<li><em>18</em><a href="/kejifunen/362893.html" title="干货！ iPhone用户如何使用Android Wear 2" target="_blank">干货！ iPhone用户如何使用Android Wear 2</a></li>
<li><em>19</em><a href="/kejifunen/362804.html" title="苹果分享了 3 个 Apple Watch 广告！为了完美，" target="_blank">苹果分享了 3 个 Apple Watch 广告！为了完美，</a></li>
<li><em>20</em><a href="/kejifunen/362607.html" title="【干货信息】AR与VR的机遇与挑战" target="_blank">【干货信息】AR与VR的机遇与挑战</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="related_article"></div>
<div class="footer">
<p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p>
<p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。
如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p>
</div>
<!-- 应用插件标签 start -->
<!-- 应用插件标签 end -->
</body>
</html>
