reactjs - 使用 ref 查找嵌套元素

Question

我正在使用 gridjs-react库创建表如下:

<Grid
  columns={['Name', 'Email']}
  data={[
    ['John', 'john@example.com'],
    ['Mike', 'mike@gmail.com']
  ]}
  ref={tableRef}
  search={true}
  pagination={{
    enabled: true,
    limit: 1,
  }}
/>

但是，我想最终向 dom 添加一个项目以获取此信息:

我想过用 ref但我无法访问以下 div，因为它仅在组件 Grid 安装后才呈现:(据我所知)

Answer 1

您可以在 useEffect 中访问网格引用当它的所有内容都被呈现时阻塞:

useEffect(()=> {
    const grid = ref.current.wrapper.current; //--> grid reference
    const header = grid.querySelector(".gridjs-head"); //--> grid header
    const itemContainer = document.createElement("div"); //--> new item container
    header.appendChild(itemContainer);
    ReactDOM.render(<Input />, itemContainer); //--> render new item inside header
  }, []);

您将需要使用 css以获得元素内所需的位置。
工作示例: https://stackblitz.com/edit/react-r5gsvw