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

有時對於響應式佈局，我們需要根據元件的寬度自適應高度。 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 (
   <p className="test" style={ { width: this.state.width, height: this.state.height } }>
    {`${this.state.width} x ${this.state.height}`}
   </p>
  );
 }
}

ReactDOM.render(
 <Card/>,
 document.getElementById(&#39;root&#39;)
);

參考資料

React生命週期

##相關推薦：

JavaScript 處理Iframe自適應高度(同或不同網域下)

DIV+CSS佈局中自適應高度的解決方法

移動端自適應高度下文字如何居中

#

以上是React根據寬度自適應高度實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！