javascript - 如何将组件引用传递给另一个组件？

Question

我有两个组件 Grid 和 Filter，我需要链接这两个组件。即，将 Grid 链接传递给 Filter。为了能够告诉过滤器使用哪个网格，需要在过滤器中链接到网格。

App.js:

  return (
    <div>
      <Grid ref={ref1}.../>
      <Filter gridRef={ref1}.../>
      <.../>
    </div>
  )

我需要做什么？

标签： javascriptreactjs

Answer 1

您必须使网格成为一个frowardRef组件。了解 forwardRef 组件。

useRef接下来，在父组件中创建一个带有钩子的 ref（比如说 rfGrid） 。将 rfGrid 传递给 Grid 组件的 ref 属性，并将 rfGrid 传递给 Filter 组件的 gridRef 属性。

import React, { useRef } from 'react';

const Parent = () => {
    const rfGrid = useRef();

    return (
        <div>
            <Grid ref={rfGrid} />
            <Filter gridRef={rfGrid} />
        </div>
    );
};