Altering the DOM manually in React

问题

I am using Ionic's IonPicker component, which renders, as a sibling to React's div#root, an ion-picker element, which appears to be a full screen overlay, which has two children: an ion-backdrop element, and its sibling, div.picker-wrapper.

I am trying to extract just the div.picker-wrapper element so that I can, say, place it relative to other components in my app, and I also want to be able to add elements to it, like a button that is a child of div.picker-wrapper, and that button would have to be a react component. So I suppose individual access to div.picker-wrapper's existing children, div.picker-toolbar and div.picker-columns, would be good as well.

And of course I need to be able to use the IonPicker's props and methods and everything.

So I'm trying to grab DOM elements and delete them, move them around, stuff like that, and of course I don't ever want the user to see things disappearing and reappearing, so, there's that.

I imagine the answer involves "Use refs" so please provide more detail. To start, I've tried

  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 }
      />
    );
  }

But picker and/or picker.current are always undefined or null.

And I've tried const x = document.getElementById('ion-overlay-1') in various places (componentDidMount, render, shouldComponentUpdate), and it's never there.

来源：https://stackoverflow.com/questions/60310269/altering-the-dom-manually-in-react

标签

javascript

reactjs

ionic-framework