node.js: cómo proporcionar una referencia a un elemento secundario

Tengo dos funciones:

export default function Example() {
  return (
    <Widget>
      <img src="/hello" />
    </Widget>
  )
}

export default function Widget() {
  const ref = useRef(null)
  return (
    <div>
      {children}
    </div>
  )
}

¿Cómo aplico 'ref' al elemento de imagen del ejemplo? ¿Hay alguna manera de aplicarlo siempre al primer elemento secundario?

stackoverflow.com/questions/37647061

– Tushar Gupta - curiosatushar

27/03/2021 a las 0:05

Eso: a) Parece requerir algunos cambios en el elemento secundario, ¿hay alguna manera de hacerlo sin? Y b) Parece requerir que cree una instancia del elemento secundario al que le estoy pasando la referencia, lo cual no puedo en este ejemplo. @TusharGupta-curioustushar

- Alexander Craggs

27/03/2021 a las 0:10

------------------------------------

puedes usar cloneElement, que nos ayuda a clonar y devolver un nuevo elemento de React usando un elemento como punto de partida. Con esto, podemos agregar referencia a los accesorios del elemento, primero, creamos una matriz de elementos secundarios, luego agregamos nuestra referencia al primero, por ejemplo:

function Wrapper({ children }) {
  const testRef = React.useRef(undefined);

  const addReftoFirstChild = (chilrens, ref) => {
    let elements = React.Children.toArray(chilrens);

    return [React.cloneElement(elements[0], { ref })].concat(elements.slice(1));
  };

  return (
    <>
      {addReftoFirstChild(children, testRef)}

      <button onClick={() => console.log(testRef.current)}>Test Ref!</button>
    </>
  );
}

function App() {
  return (
    <Wrapper>
      <img
        src='https://www.publicdomainpictures.net/pictures/80000/velka/odd-eyed-kitten.jpg'
        width={200}
        height={125}
      />
      <img
        src='https://c.files.bbci.co.uk/12A9B/production/_111434467_gettyimages-1143489763.jpg'
        width={200}
        height={125}
      />
    </Wrapper>
  );
}

------------------------------------

Puedes usar el contexto de React.

const MyContext = React.createContext();

function Widget(props) {
  const myRef = useRef(null);
  useEffect(() => {
    myRef.current.focus();
  });
  return (
    <MyContext.Provider value={myRef}>{props.children}</MyContext.Provider>
  );
}

function Example() {
  return (
    <Widget>
      <MyContext.Consumer>
        {(forwardedRef) => <input type="text" ref={forwardedRef} />}
      </MyContext.Consumer>
    </Widget>
  );
}

Creé una demostración para ti: https://codesandbox.io/s/prod-voice-mkrcp