1、路由跳轉

在繫結事件方法這樣寫：

onClick={() => this.hand(item.router)}

hand引數中可以為空

hand方法：

    hand = (roter) => {

        this.props.history.push({
            pathname: roter
        })

        // history.replace({
        //     pathname: '/orders-list'
        // })
    }

公司也可以寫為：

  hand = (roter) => {
               history.replace({
             pathname: '/orders-list'
         })
    }
 

但是需要匯入history，相當關於是封裝了一次。

注意：

這裡使用this.props可能報錯，要注意，在子元件接受父元件傳過來的值時，有沒有攜帶history,要是沒攜帶就在父元件中這樣寫：

 const { userInfo, history } = this.props;
 
 
 //子元件
  <CommonCard
                 showDateType
                hierarchyCode={userInfo?.hierarchyCode}
                history={history}
                orgId={userInfo.orgId}
                cardKey={userInfo.orgId}
              />
 

這樣子元件就可以攜帶history了。

2、react中假資料輸出dom元素

首先定義假資料檔案，後匯入需要對子檔案中

然後用map的方式輸出，原理和VUE中v-for迴圈輸出一樣的

                        {appSettings.map(item => (
                            <div className="order" >
                                <div className={`orderbox icon__color--${item.theme}`} onClick={() => this.hand(item.router)}>
                                    <IconFont className="orderTop " type={item.type} />
                                </div>
                                <p>{item.title}</p>
                            </div>
                        ))}
 

這裡要是寫過濾的話可以這樣：

 const apps = appSettings.filter(item => userInfo.isYXC ? item.version.includes('yxc') : item.version.includes('lvt'))
 
 
 
   {apps.map(item => (
                            <div className="order" >
                                <div className={`orderbox icon__color--${item.theme}`} onClick={() => this.hand(item.router)}>
                                    <IconFont className="orderTop " type={item.type} />
                                </div>
                                <p>{item.title}</p>
                            </div>
                        ))}

對filter的理解更加深刻了

這裡還有一個知識點：

className={`orderbox icon__color--${item.theme}`}

其實就是一個類className,寫法固定模板字串，在less中需要這樣定義：

            .orderbox {

                &.icon__color--blue {
                    background-color: #1F8DED;
                }

                &.icon__color--green {
                    background-color: #3AC485;
                }

                &.icon__color--yellow {
                    background-color: #FEC201;
                }
            }

其中&.icon__color--blue 等同於 orderbox.icon_color--blue

而${item.theme}就是假資料裡面的這個

        title: '訂單列表',
        type: 'icon-dingdanliebiao',
        router: '/orders-list',
        theme: 'blue'

這樣就可以去實現指定類名了。