标签：.. 找到 jsx 新增 窗体 scratch3.0 bbs 页面

很多人都利用GIT上的scratch3.0做开发，但是苦于有些定制需要个性化开发但是不知道如何动手。本篇文章来做好普及工作吧。

首先需要完成事项如下：

1.需要进行modal定义

2.新增窗口的UI界面

3.新增窗口逻辑页面

4.GUI的UI页面注册

5.gui逻辑页面注册

6.顶部菜单新增接口

下面我们就一步不来模拟，例如，我需要开发一个论坛功能。

第一步，modal定义

　　1.打开reducers/modals.js文件，修改如下：

　　　　1）找到约16行，新增以下代码

　　　　const MODAL_BBS = 'bbs';

　　　　2.）找到约30行，新增如下代码

　　·　　[MODAL_BBS]: false

　　　　3）找到约96行，新增如下代码

　　　　const openbbs = function () {

　　　　　　return openModal(MODAL_bbs);
　　　　}

　　　　const closebbs = function () {
　　　　　　return closeModal(MODAL_bbs);
　　　　};

　　　　4）找到末尾倒数第二行，新增代码

　　　　　　openbbs,    　　　　 closebbs 　　　　以上请注意逗号的使用 第二步，新增窗体的UI界面，详见附件 　　1）components/bbs/bbs.jsx

　　2）components/bbs/bbs.css

第三步，新增窗体的逻辑页面，详见附件

　　containers/bbs.jsx

第四步，gui 的UI页面注册

　　找到compents/gui/gui.jsx

　　1）找到第27行，新增代码

　　　　import Bbs from '../../containers/bbs.jsx'; 　　2）找到约118行，新增代码，别忘了逗号 　　　　bbsVisible, 　　3）找到约180行，新增代码 　　　　{bbsVisible ? (               　　      <Bbs />                 ) : null} 　　4）搜索tipsLibraryVisible: PropTypes.bool,新增代码 　　　　bbsVisible: PropTypes.bool, 

第五步，GUI逻辑页面注册

　　打开containers/gui.jsx在153行，也就是在const mapStateToProps = state => {中新增

　　　　bbsVisible: state.scratchGui.modals.bbs,

第六步，在菜单中新增论坛菜单

　　找到compents/menu-bar/menu-bar。jsx

　　1）找到33行，找到import {openTipsLibrary} from '../../reducers/modals';

　　更改为import {openTipsLibrary,openbbs} from '../../reducers/modals';

　　2）找到倒数第9行，也就是mapDispatchToProps = dispatch => ({方法内，新增（注意标点符号）

　　onOpenbbs: () =>dispatch(openbbs())

　　3）找到479行新增

<Divider className={classNames(styles.divider)} />  <div   className={classNames(styles.menuBarItem, styles.hoverable)} onClick={this.props.onOpenbbs}>                           论坛                     </div>   -------------------------------------------------------- 福建众聚互联信息科技有限公司CEO  雷君   wechat：leijun3999 欢迎交流 -----------------------------------------------------  

标签：..,找到,jsx,新增,窗体,scratch3.0,bbs,页面
来源： https://www.cnblogs.com/lickies1983/p/11904925.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。