javascript - 在 React 中手动更改 DOM

Question

我正在使用 Ionic 的IonPicker组件，它作为React 的兄弟div#root呈现一个ion-picker元素，该元素似乎是一个全屏覆盖，它有两个子元素：一个ion-backdrop元素和它的兄弟元素div.picker-wrapper。

我正在尝试仅提取div.picker-wrapper元素，以便可以将其相对于我的应用程序中的其他组件放置，并且我还希望能够向其添加元素，例如作为 的子元素的按钮div.picker-wrapper和该按钮必须是一个反应组件。所以我想个人访问div.picker-wrapper's 现有的孩子div.picker-toolbar和div.picker-columns, 也会很好。

当然，我需要能够使用IonPicker's 的道具和方法以及一切。

所以我试图抓取 DOM 元素并删除它们，移动它们，诸如此类的东西，当然我不希望用户看到东西消失和重新出现，所以，就是这样。

我想答案涉及“使用参考”，所以请提供更多细节。首先，我尝试过

  picker: RefObject<HTMLIonPickerElement> = React.createRef();

  render() {
    return (
      <IonPicker
        isOpen
        ref={ this.picker }
        animated={ true }
        mode={ 'ios' }
        cssClass={ 'firmm-picker' }
        columns={ this.columns }
        onDidDismiss={ this.props.dismiss }
        buttons={ this.buttons }
        showBackdrop={ false }
      />
    );
  }

但是picker和/或picker.current总是未定义或为空。

const x = document.getElementById('ion-overlay-1')而且我在不同的地方（componentDidMount, render, ）都试过了shouldComponentUpdate，但从来没有。

标签： javascriptreactjsionic-framework