React调整更改组件的大小

React resize change components

本文关键字：组件 调整 React      更新时间：2024-03-04

我有一个React应用程序，其中有一个用于调整窗口对象大小事件的事件侦听器。

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = { width: 0 }
    this.setSize = this.setSize.bind(this);
  }
  render() {
    let content = this.state.width < 600 ? <MobileComponent/> : <DesktopComponent />;
    return(<div>{content}</div>)
  }
  setSize() {
    this.setState({
        width: window.innerWidth
    });
  }
  componentDidMount() {
    this.setSize();
    window.addEventListener('resize', this.setSize);
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.setSize);
  }
}

这是可行的，但我的问题是，我不知道如何访问子组件中应用程序组件的状态（窗口宽度）。

那么，有人能告诉我如何在我的孩子组件中访问/发送this.state.width吗？（我知道我可以用道具发送，但如果我的组件中还有两个组件呢？）

      render() {
        let content = this.state.width < 600 ? <MobileComponent/> : <DesktopComponent />;
        return(<div>
            <div>{content}</div>
            <childComponent myWidth= {this.state.width}></childComponent >
            <childComponent2 myWidth= {this.state.width}></childComponent2 >
       </div>
      )
 }
相关文章：