React根據寬度自適應高度實例分享-js教程-PHP中文網

React根據寬度自適應高度實例分享

小云云

發布： 2018-01-25 11:40:49

原創

2513 人瀏覽過

有時對於響應式佈局，我們需要根據元件的寬度自適應高度。 CSS無法實現這種動態變化，傳統是用jQuery實現。本文主要介紹了React根據寬度自適應高度的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

而在React中無需依賴JQuery,實作相對比較簡單，只要在DidMount後更改width即可。

Try on Codepen

要注意的是在resize時候也要同步變更，需要註冊個監聽器

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 (
   
    {`${this.state.width} x ${this.state.height}`}
   
  );
 }
}

ReactDOM.render(
 ,
 document.getElementById('root')
);

登入後複製

參考資料