如何响应React中自动resize的DOM元素的宽度？
我有一个使用React组件的复杂网页，并试图将页面从静态布局转换为更具响应性的可resize的布局。 然而，我仍然遇到了React的限制，我想知道是否有一个标准的模式来处理这些问题。 在我的具体情况下，我有一个组件呈现为与显示的div：table-cell和width：auto。
不幸的是，我不能查询我的组件的宽度，因为你不能计算一个元素的大小，除非它实际上被放置在DOM（具有推断实际渲染宽度的完整上下文）中。 除了像鼠标定位这样的东西外，我还需要在组件中正确设置SVG元素的宽度属性。
此外，当窗口resize时，如何在安装过程中将尺寸更改从一个组件传递到另一个组件？ 我们在shouldComponentUpdate中完成所有第三方的SVG渲染，但不能在你的方法中设置自己或其他子组件的状态或属性。
有没有使用React处理这个问题的标准方法？
最实际的解决scheme是使用反应措施 。
注意 ：这个代码在API改变时不能与react-measure@^2.0.0一起使用。 访问上面的链接来查看新的API。
import Measure from 'react-measure' const MeasuredComp = () => ( <Measure> {({width}) => <div>My width is {width}</div>} </Measure> )
要在组件之间传递大小更改，可以传递一个onMeasurecallback函数，并将其接收到的值存储（目前，共享状态的标准方式是使用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> ))
如果你真的想要：
创build一个包装组件，该组件处理从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> );
我认为你正在寻找的生命周期方法是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" /> } });
您也可以使用findDOMNode替代couchand解决scheme
var Container = React.createComponent({ componentDidMount: function () { var width = React.findDOMNode(this).offsetWidth; }, render: function () { <svg /> } });
你可以使用我编写的库监视你的组件的渲染大小，并传递给你。
例如：
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
它使用了一个优化的滚动/基于对象的algorithm，我从人们那里借来的比我聪明得多。 🙂
