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ì)比較簡(jiǎn)單，只要在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生命周期
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
react native基于FlatList下拉刷新上拉加載實(shí)現(xiàn)代碼示例
這篇文章主要介紹了react native基于FlatList下拉刷新上拉加載實(shí)現(xiàn)代碼示例2018-09-09
react-redux中connect的裝飾器用法@connect詳解
這篇文章主要介紹了react-redux中connect的裝飾器用法@connect詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了詳解React 16 中的異常處理的相關(guān)資料,React 16.x 版本中，引入了所謂 Error Boundary 的概念，從而保證了發(fā)生在 UI 層的錯(cuò)誤不會(huì)連鎖導(dǎo)致整個(gè)應(yīng)用程序崩潰；未被任何異常邊界捕獲的異?？赡軙?huì)導(dǎo)致整個(gè) React 組件樹被卸載，需要的朋友可以參考下2017-07-07
react+typescript中使用echarts的實(shí)現(xiàn)步驟
本文主要介紹了react+typescript中使用echarts的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
React Native按鈕Touchable系列組件使用教程示例
這篇文章主要為大家介紹了React Native按鈕Touchable系列組件使用教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
react-router 路由切換動(dòng)畫的實(shí)現(xiàn)示例
這篇文章主要介紹了react-router 路由切換動(dòng)畫的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了React中常見的三種路由處理方式該如何選擇,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
react hooks實(shí)現(xiàn)防抖節(jié)流的方法小結(jié)
這篇文章主要介紹了react hooks實(shí)現(xiàn)防抖節(jié)流的幾種方法,文中通過代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法
這篇文章主要介紹了npx create-react-app xxx創(chuàng)建項(xiàng)目報(bào)錯(cuò)的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02