Как получить доступ к родительской ссылке от ребенка

this в Javascript всегда ссылается на «владельца» выполняемой функции.

Если явный владелец не определен, то ссылается на самый верхний владелец - объект окна.

Итак, если бы я сделал

function someKindOfFunction() {
   this.style = 'foo';
}

element.onclick = someKindOfFunction;

this, он ссылался бы на объект элемента. Но будьте осторожны, многие люди делают эту ошибку

<element onclick="someKindOfFunction()">

В последнем случае вы просто ссылаетесь на функцию, а не передаете ее элементу. Поэтому this будет ссылаться на объект окна.

0
задан Fallen Angel 3 March 2019 в 21:02
поделиться

1 ответ

В вашем конкретном примере вы просто получаете ширину элемента и передаете его другому элементу. Если вы используете последнюю версию реагирования, вы должны проверить api новой ссылки ( https://reactjs.org/docs/refs-and-the-dom.html ) И ваш пример будет выглядеть примерно так [ 112]

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"));
0
ответ дан Yaroslav Stasyuk 3 March 2019 в 21:02
поделиться
Другие вопросы по тегам:

Похожие вопросы: