Javascript 如何从react中的子道具访问子对象中的属性

标题非常简单，我需要访问通过组件的子元素传递的子元素上的属性（确切地说是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>
  );
}

从“React”导入React；
子类扩展了React.Component{
myRef=React.createRef（）；
render（）{
返回儿童；
}
}
常量父项=（{children}）=>{
const myChild=React.Children.toArray（Children.find）(
child=>child.type==child
);
//我想访问这个
console.log（myChild.myRef）；
//但它还没有定义
返回(
父母亲
{儿童}
);
};
//我真的无法更改此组件
导出默认函数App（）{
返回(
);
}

---

我制作了一个代码沙盒，突出显示我的问题，而不是在

中声明ref，您应该在

中声明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>
  );
}

从“React”导入React；
子类扩展了React.Component{
render（）{
返回儿童；
}
}
常量父项=（{children}）=>{
const myRef=React.useRef（null）；
//从这里访问它或做其他事情
console.log（myRef）；
返回(
父母亲
{儿童（myRef）}
);
};
导出默认函数App（）{
返回(
{myRef=>(
)}
);
}

这是否回答了您的问题？你能详细说明一下你想要达到的目标是什么吗？很可能将引用传递给父组件并不是您真正需要的。@jogesh_pi nope，因为子组件未在父组件中设置unfortunately@YevgenGorbunkov我需要在父级中访问子级的dom元素，因为我需要检查其高度/滚动位置并将其与父级匹配，然后您可以访问子级

height

/

在处理
onScroll
时将位置滚动到您父母的状态。在React中引用每个门的键。如果您想分享一些更接近您真实案例的代码示例，我会建议一些相关代码来解决您的问题。此解决方案的问题是我无法更改
应用程序
，您能告诉我为什么您无法更改您的
应用程序
？我没有访问权限，我的父/子组件是我有权访问的不同项目中的组件。