Zusammenfassung einiger gängiger Verwendungen von Refs in React

importiere React von „react“;
// Übergeordnete Komponente exportiert Standardklasse StringRef erweitert React.PureComponent {
  componentDidMount() {
    console.log("stringRefDom:", this.refs.stringRefDom);
    console.log("stringRefComp:", this.refs.stringRefComp);
  }
  rendern() {
    zurückkehren (
      <div>
        {/*So verwenden Sie native Komponenten*/}
        <div ref={"stringRefDom"}>stringRefDom</div>
        {/*So verwenden Sie die Klassenkomponente*/}
        <StringRefComp ref={"stringRefComp"} />
      </div>
    );
  }
}
//Klassenkomponente class StringRefComp extends React.PureComponent {
  rendern() {
    Gibt den StringRefComp zurück.
  }
}

importiere React von „react“;
// Übergeordnete Komponente exportiert Standardklasse CallbackRef erweitert React.PureComponent {
  Konstruktor(Requisiten) {
    super(Requisiten);
    this.callbackRefDom = null;
    this.callbackRefComp = null;
  }
  componentDidMount() {
    console.log("callbackRefDom:", this.callbackRefDom);
    console.log("callbackRefComp:", this.callbackRefComp);
  }
  //Rückruffunktion setCallbackRefDom = (ref) => {
    dies.callbackRefDom = ref;
  };
  setCallbackRefComp = (ref) => {
    dies.callbackRefComp = ref;
  };
  //Rückruffunktion render() {
    zurückkehren (
      <div>
        <div ref={this.setCallbackRefDom}>RückrufRefDom</div>
        <CallbackRefComp ref={this.setCallbackRefComp} />
      </div>
    );
  }
}

//Klassenkomponente class CallbackRefComp extends React.PureComponent {
  rendern() {
    returniere <div>callbackRefComp</div>;
  }
}

importiere React von „react“;
// Übergeordnete Komponente exportiert Standardklasse CreateRef erweitert React.PureComponent {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.createRefDom = React.createRef();
    dies.createRefComp = React.createRef();
  }
  componentDidMount() {
    Konsole.log("createRefDom:", dies.createRefDom.current);
    Konsole.log("createRefComp:", dies.createRefComp.current);
  }
  rendern() {
    zurückkehren (
      <div>
        <div ref={this.createRefDom}>RefDom erstellen</div>
        <RefComp erstellen ref={this.createRefComp} />
      </div>
    );
  }
}
//Klassenkomponente class CreateRefComp extends React.PureComponent {
  rendern() {
    Geben Sie <div>CreateRefComp</div> zurück.
  }
}

importiere React, { useEffect } von "react";
// Übergeordnete Komponente const UseRef = React.memo(() => {
  // // Sie können auch // const createRefDom = React.createRef(); verwenden.
  // const createRefComp = React.createRef();
  const createRefDom = React.useRef();
  const createRefComp = React.useRef();
  useEffect(() => {
    Konsole.log("useRefDom:", createRefDom.current);
    Konsole.log("useRefComp:", createRefComp.current);
  }, []);
  zurückkehren (
    <div>
      <div ref={createRefDom}>useRefDom</div>
      <UseRefComp ref={createRefComp} />
    </div>
  );
});

Standard-UseRef exportieren;

//Klassenkomponente class UseRefComp extends React.PureComponent {
  rendern() {
    return <div>useRefComp</div>;
  }
}

importiere React, { useEffect, useImperativeHandle } von "react";

// Übergeordnete Komponente const ForwardRef = React.memo(() => {
  const createRefComp = React.useRef();
  const createRefCompMethod = React.useRef();

  useEffect(() => {
    Konsole.log("useRefComp:", createRefComp.current);
    console.log("createRefCompMethod:", createRefCompMethod.current);
    Erstellen SieRefComp.current.reload();
  }, []);
  zurückkehren (
    <div>
      <ForwardRefFunc ref={createRefComp} />
    </div>
  );
});

Standard-ForwardRef exportieren;

const RefFunc = React.forwardRef((props, ref) => {
  const [name, setName] = React.useState(null);
  const neu laden = () => {
    console.log("neu laden");
    setzeTimeout(() => {
      setName("Weiterleitungsreferenzfunktion");
    }, 3000);
  };
  //useImperativeHandle ermöglicht Ihnen die Anpassung des Instanzwertes, der der übergeordneten Komponente angezeigt wird, wenn Sie rejectImperativeHandle(ref, () => { verwenden.
    zurückkehren {
      neu laden: neu laden,
    };
  });
  return <div ref={ref}>ForwardRefFunc {name}</div>;
});
const ForwardRefFunc = React.memo(RefFunc);