1. Class component call function component ref is not applicable, the method is as follows
Subcomponent:
head reference
import React, {
useState, useEffect, useImperativeHandle, forwardRef} from 'react'
statement
function FeishuDoc(props, ref) {
useImperativeHandle(ref, () => ({
// 需要暴露的组件
fetchDocTitle
}))
}
Parent component:
<FeishuDoc height='60vh' ref={
(e) => this.feishuDocRef = e} width='1100px' url={
this.state.feishuUrl} createDoc="false" ></FeishuDoc>
Header statement
constructor(props) {
super(props)
this.feishuDocRef = React.createRef()
this.state = {
docList: [],
listLoading: true,
modalVisible: false,
createLoading: false,
currentDocInfo: {
},
feishuUrl: ''
}
}
use
this.feishuDocRef.fetchDocTitle()
2. You can use async/await when transferring data across components, and you need to use arrow functions when using async.
Parent component
submitDoc = async ()=> {
console.log('111111222222')
let res = await this.feishuDocRef.fetchDocTitle()
this.props.form.setFieldsValue({
title: res,
tags: []
})
}
Subassembly
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. If you want to achieve the function of closing the floating display, you can use the pure css
effect:
code:
.ant-layout-content{
.ant-tabs-tab{
&:hover{
.anticon{
// display: inline-block;
visibility: visible;
}
}
.anticon{
visibility: hidden;
}
}
}
Make good use of the hov bug in the console
4. Edit form is a better way to write, and it is also easy to use when sub-components are called
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
})
}
}
)
}