20210129实习日记

1、类组件调函数组件ref是不适用的，方法如下

子组件：
头部引用

import React, {
    
     useState, useEffect, useImperativeHandle, forwardRef} from 'react'

声明

function FeishuDoc(props, ref) {
    
    
	useImperativeHandle(ref, () => ({
    
    
		// 需要暴露的组件
	    fetchDocTitle
	  }))
}

父组件：

<FeishuDoc height='60vh' ref={
    
    (e) => this.feishuDocRef = e} width='1100px' url={
    
    this.state.feishuUrl} createDoc="false" ></FeishuDoc>

头部声明

constructor(props) {
    
    
    super(props)
    this.feishuDocRef = React.createRef()
    this.state = {
    
    
      docList: [],
      listLoading: true,
      modalVisible: false,
      createLoading: false,
      currentDocInfo: {
    
    },
      feishuUrl: ''
    }
  }

使用

this.feishuDocRef.fetchDocTitle()

2、跨组件传递数据的时候可以用async/await，用async的时候需要用箭头函数
父组件

submitDoc = async ()=> {
    
    
    console.log('111111222222')
    let res = await this.feishuDocRef.fetchDocTitle()
    this.props.form.setFieldsValue({
    
    
      title: res,
      tags: []
    })
}

子组件

async function fetchDocTitle(){
    
    
    let docTitle = null
    console.log(localStorage.getItem('localFreshToken'))
    const localFreshToken = localStorage.getItem('localFreshToken') || 'unkown'
    const foldToken = getFoldToken(url)
      let authParams = {
    
    
        foldToken
    }
    authParams['refresh_token'] = localFreshToken
    let res = await getDocTitle(authParams)
    res.result && localStorage.setItem('localFreshToken', res.result.data.refresh_token)
    if(res.result_code === 2000){
    
    
      docTitle = res.result.data.data.title
    }
    return docTitle
  }

3、想要实现悬浮显示关闭的功能可以使用纯css
效果：

代码：

.ant-layout-content{
    
    
    .ant-tabs-tab{
    
    
        &:hover{
    
    
            .anticon{
    
    
                // display: inline-block;
                visibility: visible;
            }
        }
        .anticon{
    
    
            visibility: hidden;
        }
    }
}

要善用控制台的hov调bug

4、编辑表单一种比较好的写法，在子组件调用的时候也很好用

changeModalStatus = (visible, docInfo) => {
    
    
    // console.log(docInfo)
    this.expDocModalRef.changeModalStatus(true, docInfo)
    let currentDocInfo = docInfo && docInfo.id ? docInfo : null
    this.setState(
      {
    
    
        modalVisible: visible,
        currentDocInfo
      },
      () => {
    
    
        if (docInfo && docInfo.id) {
    
    
          let custom_tags = (docInfo.tags || []).filter((item) => {
    
    
            return commonTags.indexOf(item) === -1
          })
          this.props.form.setFieldsValue({
    
    
            title: docInfo.title,
            url: docInfo.url,
            desc: docInfo.desc,
            tags: docInfo.tags || [],
            custom_tags
          })
        }
      }
    )
  }