javascript - 使用 ref (第三方库)更改元素

Question

我使用第三方库来显示带有寻呼机的表格:

<Grid 
    ref={Grid => {
      this.gridRef = Grid;
    }}
    {...props} />

我只想修改分页器并创建一个新类 GridPager 来覆盖它。

在我的 componentDidMount 中，我可以显示我的 Grid 元素:

componentDidMount() {
  // display the Grid elements
  //console.log(this.gridRef.widgetInstance.element);

  // This won't work
  //this.gridRef.widgetInstance.element[0].childNodes[1] = <GridPager />; 

  // Change the Grid pager to simple 'test'
  // this.gridRef.widgetInstance.element[0].childNodes[1].innerHTML = 'test'; 
}

我可以使用 innerHTML 添加简单文本，但如何添加 React 类 GridPager ？这是我第一次使用 ref 并使用 React 处理 DOM。

Answer 1

据我所知，您正在尝试/想要做的事情既不可能又不鼓励。

不应该有像这样主动修改 React DOM 的方法。

即使您仍然可以修改内部 HTML，

childNodes 元素也应该是只读的。

当由于某种原因你不想使用 props 来传递函数时，应该使用

ref 来触发 React DOM 的不同组件的事件。

在此处查看更多信息 https://reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs

这里https://reactjs.org/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components

我明白您要尝试执行此操作的内容和原因，但如果您使用的组件不是您创建的，我认为尝试在包装或使用它的代码上修改它不是一个好主意而是直接从源代码进行更改。