Ref returns 调整大小时为空

Question

我正在尝试获取 ref 并想检查它是否有价值。

它第一次有值，但是当我调整图表大小时它就消失了。

我认为这个问题与反应有关，而不是图表库。

有什么想法吗？

https://codesandbox.io/s/billboardjs-resize-onresize-bug-28fvz

const Page1 = props => {
  const [isResize, setIsResize] = useState(false);
  const chartRef = createRef();

  const options = {
    onresize(ctx) {
      console.log(chartRef.current);
      setIsResize(true);
    },
    onresized(ctx) {
      setIsResize(false);
    },
    data: {
      columns: [
        ["data1", 30, 200, 100, 170, 150, 250],
        ["data2", 130, 100, 140, 35, 110, 50]
      ],
      types: {
        data1: "line",
        data2: "area-spline"
      },
      colors: {
        data1: "red",
        data2: "green"
      }
    }
  };
  return (
    <div>
      <Chart
        className="timelineChart"
        options={options}
        isResize={isResize}
        ref={chartRef}
      />
    </div>
  );
};

Answer 1

我想这是因为选项对象保留了第一个引用，而 createRef() 总是 return 一个新的引用。

使用 useRef() 代替 createRef()

如果有帮助请告诉我。

我在 JillAndMe 上试过 link 并且有效：https://codesandbox.io/s/billboardjs-resize-onresize-bug-28fvz

Ref returns 调整大小时为空

Ref returns null when resize

reactjs

billboard.js