Question

我有一个React App，我在窗口对象上有一个resize事件的事件监听器。

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

这件事有用但我的问题是我不知道如何访问子组件内部App组件的状态（窗口宽度）。

那么，有人可以解释一下如何在我的子组件中访问/发送this.state.width（我知道我可以使用道具发送，但如果在我的内容中还有2个组件？）

Answer 1

      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>
      )
 }

React调整大小更改组件

1 个答案: