20210129实习日记

2024-01-09 21:32

文章标签 实习日记 20210129

本文主要是介绍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 = nullconsole.log(localStorage.getItem('localFreshToken'))const localFreshToken = localStorage.getItem('localFreshToken') || 'unkown'const foldToken = getFoldToken(url)let authParams = {foldToken}authParams['refresh_token'] = localFreshTokenlet 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 : nullthis.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})}})}