在React中渲染之前检查宽度

Question

我正在尝试创建一个div，它给出溢出项目的数量，如下所示： [item1] [item2] [+4]

其中+4是不适合div的项目数量。

我能够基于计数来执行此操作，但是基于宽度来执行此操作很困难。

是否有任何方法可以在渲染时查看组件的父div是否溢出？

到目前为止，我的代码如下。

import React, { Component } from "react";
import { Button } from "antd";
import ReactDOM from "react-dom";

class ReciepesList extends Component {
  state = { elWidth: "" };
  componentDidMount() {
    //determineWidth();
  }

  determineWidth() {
    var inwidth = ReactDOM.findDOMNode(this.refs.inner).getBoundingClientRect()
      .width;
    var inheight = ReactDOM.findDOMNode(this.refs.inner).getBoundingClientRect()
      .height;
    var outwidth = ReactDOM.findDOMNode(this.refs.outer).getBoundingClientRect()
      .width;
    var outheight = ReactDOM.findDOMNode(
      this.refs.outer
    ).getBoundingClientRect().height;
    console(
      "inW",
      inwidth,
      "outW",
      outwidth,
      "inH",
      inheight,
      "outH",
      outheight
    );
  }

  render() {
    const { reciepes, all, style } = this.props;
    let count = 0;
    return (
      <div ref="outer">
        <div ref="inner" style={{ overflowY: "hidden" }}>
          {reciepes.map(reciepe => {
            //NEED SOLUTION HERE TO CHECK WIDTH
            if (count < 6 || all) {
              count++;
              return (
                <Button type="dashed" key={reciepe}>
                  {reciepe}
                </Button>
              );
            } else {
              return null;
            }
          })}

          {reciepes.length - count > 0 && (
            <Button type="dashed">+{reciepes.length - count}</Button>
          )}
        </div>
      </div>
    );
  }
}

export default ReciepesList;