Javascript 如何从子对象访问父对象引用

在JSX中将ref传递给子元素时，我遇到了一些问题。 请参见以下内容：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return (
      <div id="parent" ref={element => (this.parentRef = element)}>
        <canvas id="child" width={this.parentRef.offsetWidth} />
      </div>
    );
  }
}

ReactDOM.render(document.getElementById("app"), <App />);

从“React”导入React；
从“react dom”导入react dom；
类应用程序扩展了React.Component{
render（）{
返回(
（this.parentRef=元素）}>
);
}
}
render（document.getElementById（“app”），）；

---

我想从

#child

访问

#parent

宽度。这是怎么可能的？

在您的特定示例中，您只需要获取一个元素的宽度并将其传递给另一个元素。 如果您使用的是最新的react版本，您应该签出新ref的api（） 你的例子是这样的

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0
    };
    this.parentRef = React.createRef();
  }
  componentDidMount() {
    window.addEventListener("resize", this.onResize);
    this.onResize();
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.onResize);
  }
  onResize = () => {
    this.setState({
      width: this.getParentSize()
    });
  };
  getParentSize() {
    return (this.parentRef.current && this.parentRef.current.offsetWidth) || 0;
  }
  render() {
    return (
      <div id="parent" ref={this.parentRef}>
        <canvas
          id="child"
          width={this.getParentSize()}
          style={{ background: "red" }}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
宽度：0
};
this.parentRef=React.createRef（）；
}
componentDidMount（）{
window.addEventListener（“resize”，this.onResize）；
这个.onResize（）；
}
组件将卸载（）{
removeEventListener（“resize”，this.onResize）；
}
onResize=（）=>{
这是我的国家({
宽度：this.getParentSize（）
});
};
getParentSize（）{
返回（this.parentRef.current&&this.parentRef.current.offsetWidth）| 0；
}
render（）{
返回(
);
}
}
render（，document.getElementById（“根”））；

这已经很晚了，但我有一个解决方案，它使用了最新的React挂钩和功能组件，供未来的观众使用。由于参照的工作方式，它们不会导致值更改时重新渲染。然而，mozilla添加了一个称为ResizeObserver:，它监视组件的大小

import React，{useRef，useffect，useState}来自“React”；
从“resize observer polyfill”导入ResizeObserver；
导出默认函数App（）{
const parentRef=useRef（null）；
const[width，setWidth]=useState（0）；
useffect（（）=>{
const ro=新的ResizeObserver（（条目）=>{
entries.forEach（（entry）=>setWidth（entry.contentRect.width））；
});
ro.观察（参考电流）；
return（）=>ro.disconnect（）；
}, []);
返回(
{width}
);
}

---

操作代码：

为什么要访问父组件？@Treycos，我想以react样式设置画布宽度，而不使用“componentdidmount”技巧。我希望，这能为答案带来更紧凑和可维护的代码。但看起来，状态中的宽度变量是不必要的？哦，对了，把

width={this.getParentSize（）}

-你应该使用

width={this.state.width}

：）