Question

我正在开发响应式应用程序，目前，我在重新加载整个应用程序时遇到问题。

我想要什么？然后用户调整窗口大小，我想重新加载整个应用程序，所有组件，而不是仅重新加载一个组件。

尝试推动新路线，尽管它可以重新提交所有应用程序，但不会。

const HIDE_DRAWER_AT = 500;
if(window.innerWidth < HIDE_DRAWER_AT) {
      this.setState({ openDrawer: false, drawerAction: true });
    }
    else {
      this.setState({ openDrawer: true, drawerAction: true });
    }

// here need to rerender whole application.

Answer 1

我帮你弥补了

https://codesandbox.io/s/zq1jp12wlx

如果浏览器调整了大小，App将检查窗口宽度并更改值。然后它将新值作为prop传递，以便Drawer可以处理显示逻辑。

class App extends React.Component {
  state = {
    windowWidth: window.innerWidth
  };

  componentDidMount() {
    window.addEventListener("resize", this.getWidth.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.getWidth.bind(this));
  }

  getWidth() {
    this.setState({
      windowWidth: window.innerWidth
    });
  }

  render() {
    return <Drawer width={this.state.windowWidth} />;
  }
}

export default class Drawer extends React.Component {
  render() {
    return (
      <div className="Drawer">
        {this.props.width < 500 ? (
          <h3>I'm the drawer! DESKTOP.</h3>
        ) : (
          <h3>I'm the drawer! MOBILE.</h3>
        )}
      </div>
    );
  }
}

在特定更改时重新加载整个React应用

1 个答案: