reactjs - 调整大小时 Ref 返回 null

Question

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

它一开始是有值(value)的，但是当我调整图表大小时它就消失了。

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

有什么想法吗？

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() 总是返回一个新的引用。

使用 useRef() 而不是 createRef()

如果有帮助，请告诉我。

我在 JillAndMe 链接上试过了，它有效:https://codesandbox.io/s/billboardjs-resize-onresize-bug-28fvz