Reactjs 使用ref查找嵌套元素

我正在使用

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，因为它仅在安装组件网格后才呈现：（据我所知）

---

呈现网格的所有内容时，您可以在

useffect

块中访问网格引用：

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
  }, []);

useffect（（）=>{
const grid=ref.current.wrapper.current；//-->网格引用
const header=grid.querySelector（“.gridjs head”）；//-->网格头
const itemContainer=document.createElement（“div”）；//-->新项目容器
header.appendChild（itemContainer）；
ReactDOM.render（，itemContainer）；//-->在标题内呈现新项目
}, []);

您需要使用

css

来获得元素中所需的位置

---

工作示例：

或者只为您想要的组件使用CSS解决方案

e、 g

---

该字段是突出显示的

搜索组件。不应使用
搜索
字段向数据添加新值
<div style={{ position: 'relative'}}>
    <Grid 
    ....
    />

    <MySearchComponent style={{ position: 'absolute', top: 0, right: 0 }} />
</div>