如何获取条件渲染列表的特定实例的大小(高度/宽度)?

问题描述 投票:0回答:1

我试图简单地获得width上渲染的height之一的<div/>Child.jsThis是一个很好的例子,但就我而言,我没有一个<div/>,但array中的containers是动态渲染的。

[一旦获得这些dimensions,指向childData.offsetWidthchildData.offsetHeight,我想使用setState并将此信息存储在childDims中。

问题:

我没有设法将从data接收的Child.js限制为instance的一个this.state.dummyArray,使得无法使用setState,因为data上的callback function被传递了一次对于component处的每个rendered this.state.dummyArray.map(donkey => {...

这里是我的code

import React from "react";
import Child from "./Child";
import "./styles.css";

export default class App extends React.Component {
  state = {
    childDims: {
      width: "",
      heigth: ""
    }
  };

  componentDidMount(childData) {
    console.log("container dims from child", childData);
  }
  render() {
    return (
      <div className="App">
        <Child liftContainerDimensions={this.componentDidMount} />
      </div>
    );
  }
}
import React from "react";

export default class Child extends React.Component {
  state = {
    dummyArray: [1, 2, 3, 4]
  };
  render() {
    return (
      <div>
        {this.state.dummyArray.map(donkey => {
          return (
            <div
              style={{ border: "1px solid red", margin: "5px" }}
              ref={el =>
                this.props.liftContainerDimensions((this.container = el))
              }
            >
              {donkey}
            </div>
          );
        })}
      </div>
    );
  }
}
javascript reactjs
1个回答
0
投票

这是我的看法。感觉很奇怪,但这可以满足您的要求。

https://codesandbox.io/s/get-a-react-components-size-heightwidth-before-render-for-array-of-containers-chsy6

它使用钩子,因此对您来说可能看起来有些奇怪。

© www.soinside.com 2019 - 2024. All rights reserved.