时间戳

首页 > 解决方案 > 如何从孩子访问父参考

javascript - 如何从孩子访问父参考

问题描述

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

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

我想#parent从#child. 怎么可能？

标签： javascriptreactjs

解决方案

在您的特定示例中，您只是获取元素的宽度并将其传递给另一个元素。如果您使用的是最新的反应版本，您应该检查新的 ref 的 api ( https://reactjs.org/docs/refs-and-the-dom.html ) 你的例子看起来像这样

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

推荐阅读