Question

我正在用React js建立一个照相馆。显然，它必须具有响应性，我已经通过在组件的render方法中设置如下值来解决了这个问题：

let thumbWidth = window.innerWidth >= 480 ? 75 : 100;

问题是调整窗口大小时需要更改const值。我的第一个尝试是构建一个像这样的函数并将其绑定到构造函数中：

getThumbWidth = (vpWidth) => {
    if(vpWidth >= 480 ) {
        this.setState({thumbSize: 120}); 
     } else {
        this.setState({thumbSize: 50}); 
     }
}

这可以设置变量的初始值，但是当窗口调整大小时如何触发函数？

尝试添加大小调整功能：

resize = () => this.getThumbWidth()

...然后更改getThumbWidth，以设置组件状态中的值-这样的想法是，当状态更新时，组件会自动重新渲染：

getThumbWidth = (vpWidth) => {
    if(vpWidth >= 480 ) {
        this.setState({thumbSize: 120}); 
     } else {
        this.setState({thumbSize: 50}); 
     }
}

然后按照其他解决方案中的建议通过生命周期方法调用它，但是事件监听器似乎没有触发：

componentDidMount() {
    window.addEventListener('resize', this.resize)
}

componentWillUnmount() {
    window.removeEventListener('resize', this.resize)
}

虽然还是没用...有什么想法？

Answer 1

@Jousi，请尝试以下代码，对窗口调整大小效果很好

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      windowSize: "",
      thumbWidth: 75
    };
  }

  handleResize = e => {
    const windowSize = window.innerWidth;
    const thumbWidth = (windowSize >= 480 && 100) || 75;
    this.setState(prevState => {
      return {
        windowSize,
        thumbWidth
      };
    });
  };

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

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

  render() {
    return (
      <div>
        <h2>window size: {this.state.windowSize}</h2>
        <h3>thumbnail width: {this.state.thumbWidth}</h3>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 2

U可以将ref属性添加到组件的容器中：

return (
    <div
       className={mainClass}
       ref={(elem) => { this.elem = elem; }}
    >
        your gallery here
   </div>

然后在您的componentDidMount中，您可以访问与您的容器相关的所有事件。然后，您可以根据这些事件的更改来调用您的函数。例如：

componentDidMount() {
   const parent = this.elem.parentNode;
       if (parent.scrollHeight > parent.clientHeight) {
         parent.onscroll = (() => this.yourMethod(parent));
       } 
}

Answer 3

我认为您可能需要初始化AppDelegate函数。

像这样：Menu

在窗口大小调整时更改React JS中的值

3 个答案: