Detaillierte Erklärung der wechselseitigen Verwendung von Ref in React

const Fn = ()=>{
    const testRef = useRef(null);
    console.log('testRef',testRef.current); // Wird zweimal gerendert, das erste Mal wird null ausgegeben, das zweite Mal <div>test</div>
    zurückkehren (
        <div ref={testRef}>Test</div>
    )
}

const Fn = ()=>{
    const testRef = useRef(null);
    // Testfunktionskomponente definieren const Test = ({ refs }) => <div ref={refs}>Ich bin ein ReactDOM-Test</div>;
    console.log('testRef',testRef.current); // Wird zweimal gerendert, das erste Mal wird null ausgegeben, das zweite Mal <div>Ich bin ein ReactDOM-Test</div>
    zurückkehren (
        {/* Der Grund, warum hier „refs“ statt „ref as prop“ verwendet wird, liegt darin, dass „ref“ von React speziell verarbeitet wird und nicht als „props“ an React-Komponenten weitergegeben wird, ähnlich wie „key“ */}
         <Testreferenzen={testRef} /> 
    )
}

importiere ReactDom von „react-dom“;

const Fn = ()=>{
    const testClassRef = useRef(null);
    //Definiere die TestClass-Klassenkomponentenklasse TestClass extends React.Component {
        rendern() {
          zurückkehren (
            <div >
                Ich bin der TestClass-Komponententest</div>
          )
        }
    }
    console.log('testClassRef',testClassRef.current); // Wird zweimal gerendert, das erste Mal wird null ausgegeben, das zweite Mal <div>Ich bin ein TestClass-Komponententest</div>
    zurückkehren (
        {/* Der Grund, warum hier „refs“ statt „ref as prop“ verwendet wird, liegt darin, dass „ref“ von React speziell verarbeitet wird und nicht als „props“ an React-Komponenten weitergegeben wird, ähnlich wie „key“ */}
         <TestKlasse 
             ref={el => {
                console.log('neue Render-Referenzen')
                testClassRef.current = ReactDom.findDOMNode(el);
             }} 
         /> 
    )
}

importiere ReactDom von „react-dom“;
importiere { connect } von „react-redux“;

const Fn = ()=>{
    const testClassRef = useRef(null);
    //Definiere die TestClass-Klassenkomponentenklasse TestClass extends React.Component {
        rendern() {
          zurückkehren (
            <div >
                Ich bin der TestClass-Komponententest</div>
          )
        }
    }
    //Definieren Sie die von Connect von TestClass umschlossene Komponente //forwardRef:true. Stellen Sie Redux so ein, dass Ref als Props an die von Connect umschlossene Komponente übergeben werden kann. const TestClassConnect = connect(null, null, null, { forwardRef: true })(TestClass);
    
    console.log('testClassRef',testClassRef.current); // Wird zweimal gerendert, das erste Mal wird null ausgegeben, das zweite Mal <div>Ich bin ein TestClass-Komponententest</div>
    zurückkehren (
        {/* Der Grund, warum hier „refs“ statt „ref as prop“ verwendet wird, liegt darin, dass „ref“ von React speziell verarbeitet wird und nicht als „props“ an React-Komponenten weitergegeben wird, ähnlich wie „key“ */}
         <TestClassConnect
            ref={el => {
              console.log('neue Render-Referenzen')
              testClassRef.current = ReactDom.findDOMNode(el);
            }}
          />
    )
}