this
в Javascript всегда ссылается на «владельца» выполняемой функции.
Если явный владелец не определен, то ссылается на самый верхний владелец - объект окна.
Итак, если бы я сделал
function someKindOfFunction() {
this.style = 'foo';
}
element.onclick = someKindOfFunction;
this
, он ссылался бы на объект элемента. Но будьте осторожны, многие люди делают эту ошибку
<element onclick="someKindOfFunction()">
В последнем случае вы просто ссылаетесь на функцию, а не передаете ее элементу. Поэтому this
будет ссылаться на объект окна.
В вашем конкретном примере вы просто получаете ширину элемента и передаете его другому элементу. Если вы используете последнюю версию реагирования, вы должны проверить 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"));