Ответ 1
Наиболее практичным решением является использование react-measure.
Примечание: этот код не работает с [email protected]^2.0.0 по мере изменения API. Перейдите по ссылке выше, чтобы увидеть новый 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>
);