在不卸载/重置的情况下更改react组件dom父组件

在React中，要在不卸载或重置组件的情况下更改组件的DOM父组件，可以通过以下步骤实现：

确定要更改DOM父组件的React组件。假设该组件名为ChildComponent。
在ChildComponent组件中，使用React的Context API创建一个上下文对象。上下文对象可以在组件树中共享数据。

import React from 'react';

const ParentContext = React.createContext();

class ChildComponent extends React.Component {
  render() {
    return (
      <ParentContext.Consumer>
        {parent => (
          <div>
            {/* ChildComponent的内容 */}
          </div>
        )}
      </ParentContext.Consumer>
    );
  }
}

在ChildComponent的父组件中，将ChildComponent包装在一个新的组件中，并将新组件作为ChildComponent的新的父组件。

import React from 'react';

const ParentContext = React.createContext();

class ParentComponent extends React.Component {
  render() {
    return (
      <ParentContext.Provider value={this}>
        <div>
          {/* ParentComponent的内容 */}
          <ChildComponent />
        </div>
      </ParentContext.Provider>
    );
  }
}

通过上述步骤，我们创建了一个上下文对象ParentContext，并将ParentComponent作为该上下文对象的值传递给ChildComponent。这样，ChildComponent就可以通过ParentContext.Consumer来获取ParentComponent的实例，并在其内部进行相应的DOM操作。

需要注意的是，上述方法只适用于在不卸载或重置组件的情况下更改DOM父组件。如果需要完全替换组件的DOM父组件，可以考虑使用React的ReactDOM.createPortal方法。