设置对动态创建的组件的引用

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.dynamicComponentRef = React.createRef();
  }

  handleClick() {
    // 通过this.dynamicComponentRef可以访问和操作动态创建的组件
    this.dynamicComponentRef.current.doSomething();
  }

  render() {
    return (
      <div>
        <DynamicComponent ref={this.dynamicComponentRef} />
        <button onClick={this.handleClick.bind(this)}>操作动态组件</button>
      </div>
    );
  }
}

<template>
  <div>
    <dynamic-component ref="dynamicComponentRef"></dynamic-component>
    <button @click="handleClick">操作动态组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 通过this.$refs.dynamicComponentRef可以访问和操作动态创建的组件
      this.$refs.dynamicComponentRef.doSomething();
    },
  },
};
</script>

const DynamicComponentContext = React.createContext();

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.dynamicComponentRef = React.createRef();
  }

  render() {
    return (
      <DynamicComponentContext.Provider value={this.dynamicComponentRef}>
        <DynamicComponent />
        <button onClick={() => this.dynamicComponentRef.current.doSomething()}>
          操作动态组件
        </button>
      </DynamicComponentContext.Provider>
    );
  }
}

class DynamicComponent extends React.Component {
  static contextType = DynamicComponentContext;

  componentDidMount() {
    // 通过this.context可以获取对动态创建的组件的引用
    this.context.current = this;
  }

  render() {
    return <div>动态创建的组件</div>;
  }
}