React 之 & DOM Réfs

Parce que les deux premiers mois de la nouvelle épidémie de la Couronne a retardé le temps de démarrage à la maison seul frotter frotter l'entreprise manger et boire pour avoir oublié qu'elle était encore un des praticiens de l'informatique, puis retourner au travail progressivement vers Dieu, il blogue encore souvenu. Ha ha ha

Lorsqu'ils se sont rencontrés récemment mis au point sur l'utilisation de la référence, refs appris à utiliser après avoir lu le document après la sortie 16.3, il y a eu des changements, que ce disque

Après la version 16,3 Ref Utilisation recommandée (React.createRef ()):

1. Simple à utiliser:

// 代码引入了typeScript
// 通过createRef使用  React16.3之后的推荐用法
export class RefCreate extends React.Component{
    
    // 泛型中的HTML类型需要根据对应的ref元素进行更改
    private btnRef:React.RefObject<HTMLButtonElement> = React.createRef();

    getRef = () => {
        console.log(this.btnRef);
    }

    render(){
        return (
            <>
                <button ref={this.btnRef}>最新的ref用法</button>
                <button onClick={this.getRef}>获取Ref</button>
            </>
        )
    }
}

2. La nécessité d'acquérir du composant parent Ref

// 代码使用了TypeScript
// 在父组件通过createRef()创建Ref，通过ref传递给子组件，子组件通过forwardRef()方法对ref进行转发，转发至对应的DOM
// 子组件
export const FancyButton = 
    React.forwardRef<HTMLButtonElement, PropsWithoutRef<ComponentProps<'button'>> & RefAttributes<HTMLButtonElement>>((props, ref) => {
    return <button ref={ref}>{props.children}</button>
})



// 父组件
class ParentRef extends React.Component<{},{}>{

    // 定义Ref
    private childRefs:React.RefObject<HTMLButtonElement> =  React.createRef();
    
    getChildRef = () => {
        console.log(this.childRefs.current);
    }
    
    render(){
        return (
            <>
                <FancyButton btnRef={this.childRefs} />
                <button onClick={this.getChildRef}>获取子组件ref</button>    
            </>
        )
    }
}

 L'intérieur vaut dire sur les génériques de transfert vers l'avant, puis regardé la déclaration ts ne comprenait pas tout à fait, de connaître le type générique correspondant (un peu long) après Baidu:

<HTMLButtonElement, PropsWithoutRef <ComponentProps < 'bouton' >> & RefAttributes <HTMLButtonElement >>

 

Avant la version 16.3 d'utilisation Réf:

1. Utilisation simple (string Ref)

// 字符串类型的ref 通过this.refs.XX调用  已经不再推荐使用
export default class RefsButton extends React.Component{
    constructor(props:any){
        super(props);
        this.state={
            
        }
    }

    getMyRefs = () => {
        console.log(this.refs.myBtn);
    }

    render(){
        return(
            <>
                <button ref="myBtn">字符串类型的ref</button>
                <button onClick={this.getMyRefs}>获取ref</button>
            </>
        )
    }
}

2. Utilisation simple (Réf fonction de rappel)

// 通过Ref回调函数的形式使用

export class RefFunction extends React.Component{

    btnRef:HTMLButtonElement | null = null;

    setRef = (el:HTMLButtonElement) => {
        this.btnRef = el;
    }

    getRef = () => {
        console.log(this.btnRef);
    }

    render(){
        return (
            <>
                <button ref={this.setRef}>通过回调形式设置ref</button>
                <button onClick={this.getRef}>获取Ref</button>
            </>
        )
    }
}

3. Les sous-ensembles Ref appel composant parent

// 父组件获取子组件的ref ref通过回调获取 通过props传递

// 子组件
export class PropRef extends React.Component<{btnRef: (el:HTMLButtonElement) => any},{}>{
    constructor(props:any){
        super(props);
        this.state={

        }
    }

    render(){
        return(
            <>
                <button ref={this.props.btnRef}>子按钮</button>
            </>
        )
    }
}

// 父组件

class PropRef extends React.Component<{},{}>{
    constructor(props:any){
        super(props);
        this.state={

        }
    }

    private parentRef: HTMLButtonElement | null = null;

    getChildRef = () => {
        console.log(this.parentRef);
    }

    render(){
        return(
            <>
                <PropRef btnRef={el => this.parentRef = el} />
                <button onClick={this.getChildRef}>获取子组件ref</button>
            </>
        )
    }
}

 

Finition utilisation temporaire de ref sur ces, nous espérons vous aider

plus de