Question

我使用第三方库来显示包含寻呼机的表格：

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

我想只修改寻呼机并创建一个新的类GridPager来覆盖它。

在我的componentDidMount中，我可以显示我的网格元素：

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元素也应该是只读的。

当出于某种原因你不想使用道具来传递函数时，

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

我看到你尝试这样做的原因和原因，但是如果你使用的是你没有创建的组件，我认为尝试在包装或使用它的代码上修改它是不是一个好主意。而是直接从源代码进行更改。

使用ref（第三方库）更改元素

1 个答案: