很多人都利用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.jsx2）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> 附件地址：點擊下載--------------------------------------------------------------------
博主：雷君（微軟MVP，眾聚互聯CEO）
長期致力于企業IT服務，以及青少年編程培訓課程
培訓機構討論熱線：18859773999
--------------------------------------------------------------------
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/3764.html
標籤：其他
上一篇：分享使用PHP開發留言板