如何從反應中的兒童道具訪問兒童的屬性

Question

標題非常簡單，我需要訪問通過我的組件的子元素傳遞的子元素上的屬性（准確地說是引用），這意味着我無法在父 afaik 中傳遞引用。 這是一個突出我的問題的最小示例：

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

與其在<Child/>中聲明 ref ，不如在<Parent/>中聲明 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>
  );
}