React根據(jù)寬度自適應(yīng)高度的示例代碼
更新時(shí)間：2017年10月11日 08:22:28 作者：jxy
本篇文章主要介紹了React根據(jù)寬度自適應(yīng)高度的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
有時(shí)對(duì)于響應(yīng)式布局，我們需要根據(jù)組件的寬度自適應(yīng)高度。CSS無法實(shí)現(xiàn)這種動(dòng)態(tài)變化，傳統(tǒng)是用jQuery實(shí)現(xiàn)。
而在React中無需依賴于JQuery,實(shí)現(xiàn)相對(duì)比較簡單，只要在DidMount后更改width即可
需要注意的是在resize時(shí)候也要同步變更，需要注冊(cè)個(gè)監(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就自適應(yīng)
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React?Native?中處理?Android?手機(jī)吞字的解決方案
這篇文章主要介紹了React?Native?中處理?Android?手機(jī)吞字的解決方案,作者在 React Native 0.67.4 環(huán)境下，編寫了一個(gè)小 demo 來復(fù)現(xiàn)這個(gè)問題，需要的朋友可以參考下2022-08-08
如何在React?Native開發(fā)中防止滑動(dòng)過程中的誤觸
在使用React?Native開發(fā)的時(shí)，當(dāng)我們快速滑動(dòng)應(yīng)用的時(shí)候，可能會(huì)出現(xiàn)誤觸，導(dǎo)致我們會(huì)點(diǎn)擊到頁面中的某一些點(diǎn)擊事件，誤觸導(dǎo)致頁面元素響應(yīng)從而進(jìn)行其他操作,表現(xiàn)出非常不好的用戶體驗(yàn)。2023-05-05
這篇文章主要為大家介紹了React 和 Redux的關(guān)系，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)pc端的彈出框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
本文主要介紹了淺談React useDebounce 防抖原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
react實(shí)現(xiàn)同頁面三級(jí)跳轉(zhuǎn)路由布局
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)同頁面三級(jí)跳轉(zhuǎn)路由布局，一個(gè)路由小案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
react時(shí)間分片實(shí)現(xiàn)流程詳解
實(shí)現(xiàn)react時(shí)間分片，主要內(nèi)容包括什么是時(shí)間分片、為什么需要時(shí)間分片、實(shí)現(xiàn)分片開啟 - 固定、實(shí)現(xiàn)分片中斷、重啟 - 連續(xù)、分片重啟、實(shí)現(xiàn)延遲執(zhí)行 - 有間隔、時(shí)間分片異步執(zhí)行方案的演進(jìn)、時(shí)間分片簡單實(shí)現(xiàn)、總結(jié)、基本概念、基礎(chǔ)應(yīng)用、原理機(jī)制和需要注意的事項(xiàng)等2022-11-11
React18系列reconciler從0實(shí)現(xiàn)過程詳解
這篇文章主要介紹了React18系列reconciler從0實(shí)現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要跟大家介紹了關(guān)于React-Native中一些常用組件的用法的相關(guān)資料，其中詳細(xì)介紹了關(guān)于ScrollView組件、ListView組件、Navigator組件、TableBarIOS組件以及網(wǎng)絡(luò)請(qǐng)求等相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。2017-06-06
工程級(jí)?React?注冊(cè)登錄全棧級(jí)流程分析
這篇文章主要介紹了工程級(jí)?React?注冊(cè)登錄全棧級(jí)流程,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02