如何从反应中的儿童道具访问儿童的属性

Question

The title is pretty straightforward, I need to access a property (a ref to be precise) on a child element that is passed through the children of my component, which means that I can't pass the ref in the parent afaik. Here's a minimal example to highlight my issue:

import React from "react";

class Child extends React.Component {
  myRef = React.createRef();

  render() {
    return <div ref={this.myRef}>child</div>;
  }
}

const Parent = ({ children }) => {
  const myChild = React.Children.toArray(children).find(
    child => child.type === Child
  );
  // I want to access this
  console.log(myChild.myRef);
  // but it's undefined

  return (
    <div>
      <h1>Parent</h1>
      {children}
    </div>
  );
};

// I can't really change this component
export default function App() {
  return (
    <div className="App">
      <Parent>
        <Child />
      </Parent>
    </div>
  );
}

I made a codesandbox highlighting my issue https://codesandbox.io/s/eloquent-wing-e0ejh?file=/src/App.js

Answer 1

Rather than declaring ref in <Child/> , you should declare ref in your <Parent/> and pass it to the child.

import React from "react";

class Child extends React.Component {

  render() {
    return <div ref={this.props.myRef}>child</div>;
  }
}

const Parent = ({ children }) => {
  const myRef = React.useRef(null);

  // access it from here or do other thing
  console.log(myRef);

  return (
    <div>
      <h1>Parent</h1>
      { children(myRef) }
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Parent>
        {myRef => (
          <Child myRef={myRef} />
        )}
      </Parent>
    </div>
  );
}