第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

使用React重新調(diào)整瀏覽器的渲染視圖

使用React重新調(diào)整瀏覽器的渲染視圖

慕桂英546537 2020-02-04 14:32:25
調(diào)整瀏覽器窗口大小時(shí),如何讓React重新渲染視圖?背景我有一些塊要在頁面上單獨(dú)布局,但是我還希望它們?cè)跒g覽器窗口更改時(shí)進(jìn)行更新。最終結(jié)果將類似于Ben Holland的 Pinterest布局,但使用React編寫的不僅是jQuery。我還有一段路要走。碼這是我的應(yīng)用程序:var MyApp = React.createClass({  //does the http get from the server  loadBlocksFromServer: function() {    $.ajax({      url: this.props.url,      dataType: 'json',      mimeType: 'textPlain',      success: function(data) {        this.setState({data: data.events});      }.bind(this)    });  },  getInitialState: function() {    return {data: []};  },  componentWillMount: function() {    this.loadBlocksFromServer();  },      render: function() {    return (        <div>      <Blocks data={this.state.data}/>      </div>    );  }});React.renderComponent(  <MyApp url="url_here"/>,  document.getElementById('view'))然后,我有了Block組件(相當(dāng)于Pin上面的Pinterest示例中的):var Block = React.createClass({  render: function() {    return (        <div class="dp-block" style={{left: this.props.top, top: this.props.left}}>        <h2>{this.props.title}</h2>        <p>{this.props.children}</p>        </div>    );  }});和的清單/集合Blocks:var Blocks = React.createClass({  render: function() {    //I've temporarily got code that assigns a random position    //See inside the function below...    var blockNodes = this.props.data.map(function (block) {         //temporary random position      var topOffset = Math.random() * $(window).width() + 'px';       var leftOffset = Math.random() * $(window).height() + 'px';       return <Block order={block.id} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;    });    return (        <div>{blockNodes}</div>    );  }});題我應(yīng)該添加jQuery的窗口調(diào)整大小嗎?如果是這樣,在哪里?$( window ).resize(function() {  // re-render the component});有沒有更“反應(yīng)”的方式來做到這一點(diǎn)?
查看完整描述

3 回答

?
qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

使用React Hooks:


您可以定義一個(gè)自定義的Hook來監(jiān)聽window resize事件,如下所示:


import React, { useLayoutEffect, useState } from 'react';


function useWindowSize() {

  const [size, setSize] = useState([0, 0]);

  useLayoutEffect(() => {

    function updateSize() {

      setSize([window.innerWidth, window.innerHeight]);

    }

    window.addEventListener('resize', updateSize);

    updateSize();

    return () => window.removeEventListener('resize', updateSize);

  }, []);

  return size;

}


function ShowWindowDimensions(props) {

  const [width, height] = useWindowSize();

  return <span>Window size: {width} x {height}</span>;

}

這樣做的好處是邏輯被封裝,您可以在要使用窗口大小的任何位置使用此Hook。


使用React類:


您可以在componentDidMount中進(jìn)行監(jiān)聽,類似于該組件,它僅顯示窗口尺寸(如<span>Window size: 1024 x 768</span>):


import React from 'react';


class ShowWindowDimensions extends React.Component {

  state = { width: 0, height: 0 };

  render() {

    return <span>Window size: {this.state.width} x {this.state.height}</span>;

  }

  updateDimensions = () => {

    this.setState({ width: window.innerWidth, height: window.innerHeight });

  };

  componentDidMount() {

    window.addEventListener('resize', this.updateDimensions);

  }

  componentWillUnmount() {

    window.removeEventListener('resize', this.updateDimensions);

  }

}


查看完整回答
反對(duì) 回復(fù) 2020-02-04
?
守著一只汪

TA貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊

我只想根據(jù)此答案提供她的解決方案的修改版本,而無需jQuery。


var WindowDimensions = React.createClass({

    render: function() {

        return <span>{this.state.width} x {this.state.height}</span>;

    },

    updateDimensions: function() {


    var w = window,

        d = document,

        documentElement = d.documentElement,

        body = d.getElementsByTagName('body')[0],

        width = w.innerWidth || documentElement.clientWidth || body.clientWidth,

        height = w.innerHeight|| documentElement.clientHeight|| body.clientHeight;


        this.setState({width: width, height: height});

        // if you are using ES2015 I'm pretty sure you can do this: this.setState({width, height});

    },

    componentWillMount: function() {

        this.updateDimensions();

    },

    componentDidMount: function() {

        window.addEventListener("resize", this.updateDimensions);

    },

    componentWillUnmount: function() {

        window.removeEventListener("resize", this.updateDimensions);

    }

});


查看完整回答
反對(duì) 回復(fù) 2020-02-04
  • 3 回答
  • 0 關(guān)注
  • 826 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)