React根據(jù)寬度自適應高度的示例代碼

更新時間：2017年10月11日 08:22:28 作者：jxy

本篇文章主要介紹了React根據(jù)寬度自適應高度的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

有時對于響應式布局，我們需要根據(jù)組件的寬度自適應高度。CSS無法實現(xiàn)這種動態(tài)變化，傳統(tǒng)是用jQuery實現(xiàn)。

而在React中無需依賴于JQuery,實現(xiàn)相對比較簡單，只要在DidMount后更改width即可

需要注意的是在resize時候也要同步變更，需要注冊個監(jiān)聽器

class Card extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   width: props.width || -1,
   height: props.height || -1,
  }
 }

 componentDidMount() {
  this.updateSize();
  window.addEventListener('resize', () => this.updateSize());
 }

 componentWillUnmount() {
  window.removeEventListener('resize', () => this.updateSize());
 }

 updateSize() {
  try {
   const parentDom = ReactDOM.findDOMNode(this).parentNode;
   let { width, height } = this.props;
   //如果props沒有指定height和width就自適應
   if (!width) {
    width = parentDom.offsetWidth;
   }
   if (!height) {
    height = width * 0.38;
   }
   this.setState({ width, height });
  } catch (ignore) {
  }
 }

 render() {
  return (
   <div className="test" style={ { width: this.state.width, height: this.state.height } }>
    {`${this.state.width} x ${this.state.height}`}
   </div>
  );
 }
}

ReactDOM.render(
 <Card/>,
 document.getElementById('root')
);

參考資料

React生命周期

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React?Native?中處理?Android?手機吞字的解決方案
這篇文章主要介紹了React?Native?中處理?Android?手機吞字的解決方案,作者在 React Native 0.67.4 環(huán)境下，編寫了一個小 demo 來復現(xiàn)這個問題，需要的朋友可以參考下
2022-08-08
如何在React?Native開發(fā)中防止滑動過程中的誤觸
在使用React?Native開發(fā)的時，當我們快速滑動應用的時候，可能會出現(xiàn)誤觸，導致我們會點擊到頁面中的某一些點擊事件，誤觸導致頁面元素響應從而進行其他操作,表現(xiàn)出非常不好的用戶體驗。
2023-05-05
詳解React 和 Redux的關(guān)系
這篇文章主要為大家介紹了React 和 Redux的關(guān)系，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-11-11
React實現(xiàn)pc端的彈出框效果
這篇文章主要為大家詳細介紹了React實現(xiàn)pc端的彈出框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
淺談React useDebounce 防抖原理
本文主要介紹了淺談React useDebounce 防抖原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局
這篇文章主要為大家詳細介紹了react實現(xiàn)同頁面三級跳轉(zhuǎn)路由布局，一個路由小案例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
react時間分片實現(xiàn)流程詳解
實現(xiàn)react時間分片，主要內(nèi)容包括什么是時間分片、為什么需要時間分片、實現(xiàn)分片開啟 - 固定、實現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實現(xiàn)延遲執(zhí)行 - 有間隔、時間分片異步執(zhí)行方案的演進、時間分片簡單實現(xiàn)、總結(jié)、基本概念、基礎應用、原理機制和需要注意的事項等
2022-11-11
React18系列reconciler從0實現(xiàn)過程詳解
這篇文章主要介紹了React18系列reconciler從0實現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
React-Native中一些常用組件的用法詳解(二)
這篇文章主要跟大家介紹了關(guān)于React-Native中一些常用組件的用法的相關(guān)資料，其中詳細介紹了關(guān)于ScrollView組件、ListView組件、Navigator組件、TableBarIOS組件以及網(wǎng)絡請求等相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-06-06
工程級?React?注冊登錄全棧級流程分析
這篇文章主要介紹了工程級?React?注冊登錄全棧級流程,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-02-02