web-dev-qa-db-ja.com

Reactで自動サイズ設定されたDOM要素の幅にどのように対応できますか？

Reactコンポーネントを使用する複雑なWebページがあり、ページを静的レイアウトからより応答性の高いサイズ変更可能なレイアウトに変換しようとしています。しかし、私はReactで制限に直面し続けており、これらの問題を処理するための標準パターンがあるかどうか疑問に思っています。私の特定のケースでは、display：table-cellとwidth：autoでdivとしてレンダリングするコンポーネントがあります。

残念ながら、実際にDOM（実際のレンダリングされた幅を推定する完全なコンテキストを持っている）に配置されていない限り、要素のサイズを計算できないため、コンポーネントの幅を照会できません。相対的なマウスの配置などにこれを使用する以外に、コンポーネント内のSVG要素の幅属性を適切に設定するためにもこれが必要です。

さらに、ウィンドウのサイズが変更されたときに、セットアップ中にコンポーネント間でサイズの変更をどのように伝えることができますか？ shouldComponentUpdateでサードパーティのSVGレンダリングをすべて行っていますが、自分自身またはそのメソッド内の他の子コンポーネントに状態やプロパティを設定することはできません。

Reactを使用してこの問題に対処する標準的な方法はありますか？

javascriptreactjsresponsive
84
Steve Hollasch

最も実用的な解決策は、 react-measure を使用することです。

注：APIが変更されたため、このコードはreact-measure@^2.0.0では機能しません。上記のリンクにアクセスして、新しいAPIをご覧ください。

import Measure from 'react-measure'

const MeasuredComp = () => (
  <Measure>
    {({width}) => <div>My width is {width}</div>}
  </Measure>
)

コンポーネント間でサイズの変更を伝えるには、onMeasureコールバックを渡して、受け取った値をどこかに保存します（最近の状態を共有する標準的な方法は Redux を使用することです）：

import Measure from 'react-measure'
import connect from 'react-redux'
import {setMyCompWidth} from './actions' // some action that stores width in somewhere in redux state

function select(state) {
  return {
    currentWidth: ... // get width from somewhere in the state
  }
}

const MyComp = connect(select)(({dispatch, currentWidth}) => (
  <Measure onMeasure={({width}) => dispatch(setMyCompWidth(width))}>
    <div>MyComp width is {currentWidth}</div>
  </Measure>
))

あなたが本当に望むなら、あなた自身を転がす方法：

DOMから値を取得し、ウィンドウサイズ変更イベント（またはreact-measureで使用されるコンポーネントサイズ変更検出）をリッスンするハンドルコンポーネントを作成します。 DOMから取得するプロップを指定し、それらのプロップを子として取るレンダー関数を提供します。

レンダリングするものは、DOMプロップを読み取る前にマウントする必要があります。これらのプロップが最初のレンダリング中に利用できない場合は、style={{visibility: 'hidden'}}を使用して、ユーザーがJSで計算されたレイアウトを取得する前に表示できないようにすることができます。

// @flow

import React, {Component} from 'react';
import shallowEqual from 'shallowequal';
import throttle from 'lodash.throttle';

type DefaultProps = {
  component: ReactClass<any>,
};

type Props = {
  domProps?: Array<string>,
  computedStyleProps?: Array<string>,
  children: (state: State) => ?React.Element<any>,
  component: ReactClass<any>,
};

type State = {
  remeasure: () => void,
  computedStyle?: Object,
  [domProp: string]: any,
};

export default class Responsive extends Component<DefaultProps,Props,State> {
  static defaultProps = {
    component: 'div',
  };

  remeasure: () => void = throttle(() => {
    const {root} = this;
    if (!root) return;
    const {domProps, computedStyleProps} = this.props;
    const nextState: $Shape<State> = {};
    if (domProps) domProps.forEach(prop => nextState[prop] = root[prop]);
    if (computedStyleProps) {
      nextState.computedStyle = {};
      const computedStyle = getComputedStyle(root);
      computedStyleProps.forEach(prop => 
        nextState.computedStyle[prop] = computedStyle[prop]
      );
    }
    this.setState(nextState);
  }, 500);
  // put remeasure in state just so that it gets passed to child 
  // function along with computedStyle and domProps
  state: State = {remeasure: this.remeasure};
  root: ?Object;

  componentDidMount() {
    this.remeasure();
    this.remeasure.flush();
    window.addEventListener('resize', this.remeasure);
  }
  componentWillReceiveProps(nextProps: Props) {
    if (!shallowEqual(this.props.domProps, nextProps.domProps) || 
        !shallowEqual(this.props.computedStyleProps, nextProps.computedStyleProps)) {
      this.remeasure();
    }
  }
  componentWillUnmount() {
    this.remeasure.cancel();
    window.removeEventListener('resize', this.remeasure);
  }
  render(): ?React.Element<any> {
    const {props: {children, component: Comp}, state} = this;
    return <Comp ref={c => this.root = c} children={children(state)}/>;
  }
}

これにより、幅の変更への対応は非常に簡単です。

function renderColumns(numColumns: number): React.Element<any> {
  ...
}
const responsiveView = (
  <Responsive domProps={['offsetWidth']}>
    {({offsetWidth}: {offsetWidth: number}): ?React.Element<any> => {
      if (!offsetWidth) return null;
      const numColumns = Math.max(1, Math.floor(offsetWidth / 200));
      return renderColumns(numColumns);
    }}
  </Responsive>
);
64
Andy

お探しのライフサイクルメソッドはcomponentDidMountです。要素はすでにDOMに配置されており、コンポーネントのrefsから要素に関する情報を取得できます。

例えば：

var Container = React.createComponent({

  componentDidMount: function () {
    // if using React < 0.14, use this.refs.svg.getDOMNode().offsetWidth
    var width = this.refs.svg.offsetWidth;
  },

  render: function () {
    <svg ref="svg" />
  }

});
43
couchand

Couchandソリューションの代わりに、findDOMNodeを使用できます

var Container = React.createComponent({

  componentDidMount: function () {
    var width = React.findDOMNode(this).offsetWidth;
  },

  render: function () {
    <svg />
  }
});
22
Lukasz Madon

私が書いたIライブラリを使用して、コンポーネントのレンダリングサイズを監視し、それをあなたに渡すことができます。

例えば：

import SizeMe from 'react-sizeme';

class MySVG extends Component {
  render() {
    // A size prop is passed into your component by my library.
    const { width, height } = this.props.size;

    return (
     <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
     </svg>
    );
  }
} 

// Wrap your component export with my library.
export default SizeMe()(MySVG);

デモ： https://react-sizeme-example-esbefmsitg.now.sh/

Github： https://github.com/ctrlplusb/react-sizeme

私よりもはるかに賢い人々から借りた最適化されたスクロール/オブジェクトベースのアルゴリズムを使用します。 :)

5
ctrlplusb