Как получить ссылку на детей с помощью хука реакции? - PullRequest
Новая
       27

Как получить ссылку на детей с помощью хука реакции?

0 голосов
/ 05 августа 2020

Я пытаюсь получить ссылку на дочерний компонент, но похоже, что это не работает. Тот же подход отлично работает с компонентом класса React, но не с хуками. 

import React, { useState, useRef } from "react";

export default function TestContainer(props) {
   const ref = useRef(null);

   return (
     <div className="test-container" onClick={() => console.log(ref) // this logs null always}>
      {React.Children.map(props.children, c =>
        React.cloneElement(c, {
          ref: n => {
            console.log(n);
            ref.current = n;
          },
          className: "test-container"
        })
      )}
     </div>
   );
}

export function Test(props) {  
 return <div className="test" {...props}>
   {props.children}
 </div>
}

1 Ответ

0 голосов
/ 05 августа 2020

Ваш компонент в порядке. Вероятно, это связано с тем, что для этого компонента нет дочерних элементов. Я воспроизвел его с использованием TestContainer в App и поместил <h2>Ref</h2> в качестве дочернего элемента TestContainer:

(конечно, удалил комментарий, поскольку он скрывал })

Приложение. js

import React from "react";
import "./styles.css";
import TestContainer from "./TestContainer";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <TestContainer>
        <h2>Ref</h2>
      </TestContainer>
    </div>
  );
}

TestContainer. js

import React, { useState, useRef } from "react";

export default function TestContainer(props) {
  const ref = useRef(null);

  return (
    <div className="test-container" onClick={() => console.log(ref)}>
      {React.Children.map(props.children, c =>
        React.cloneElement(c, {
          ref: n => {
            console.log(n);
            ref.current = n;
          },
          className: "test-container"
        })
      )}
    </div>
  );
}

CodeSndbox:

ЗДЕСЬ

...