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

Question

标题非常简单，我需要访问通过我的组件的子元素传递的子元素上的属性（准确地说是 ref），这意味着我无法在父 afaik 中传递 ref . 这是一个突出我的问题的最小示例：

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>
  );
}

我制作了一个代码框来突出我的问题https://codesandbox.io/s/eloquent-wing-e0ejh?file=/src/App.js

Answer 1

您应该在<Parent/> 中声明 ref 并将其传递给孩子，而不是在 <Child/> 中声明 ref。

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>
  );
}