子组件暴露一个方法，在父组件访问不到

[wulianpu]

在子组件 SubComponent 暴露了setData方法，但在父组件 ParentComponent 的 componentDidMount 方法里访问，显示this.componentRef.current.setData is not a function

import { QuarkElement, property, customElement, createRef } from 'quarkc';

@customElement({tag: 'parent-component'})
class ParentComponent extends QuarkElement {
  componentRef = createRef();

  componentDidMount() {
    this.componentRef.current.setData(123);
  }

  render() {
    return <sub-component ref={this.componentRef} />;
  }
}

@customElement({tag: 'sub-component'})
class SubComponent extends QuarkElement {
  @property()
  name = 'World';

  setData(data) {
    console.log(data);
  }

  render() {
    return <p> Hello {this.name} </p>;
  }
}

复现地址：https://stackblitz.com/edit/vitejs-vite-z5iupf?file=src%2Findex.tsx

[xsf0105]

父组件的 componentDidMount 中子组件的还没加载完成！ 下面这样就能拿到

import { QuarkElement, property, customElement, createRef } from 'quarkc';

@customElement({
  tag: 'parent-component',
})
class ParentComponent extends QuarkElement {
  componentRef = createRef();

  componentDidMount() {
    // this.componentRef.current.setData(123);
    // console.log('dad', this.componentRef.current.name, 11);
  }

  handleClick = () => {
    this.componentRef.current.setData(123);
  };

  render() {
    return (
      <>
        <sub-component ref={this.componentRef} />
        <button onClick={this.handleClick}>Click me</button>
      </>
    );
  }
}

@customElement({
  tag: 'sub-component',
})
class SubComponent extends QuarkElement {
  @property()
  name = 'World';

  setData = (data) => {
    console.log(data, 111);
  };

  componentDidMount() {
    console.log('sub');
  }

  render() {
    return <p> Hello {this.name} </p>;
  }
}

或者你在父组件 componentDidMount 中写个setTimeout也能拿到子组件方法

[xsf0105]

Live Demo: https://stackblitz.com/edit/vitejs-vite-mz9t8n?file=src%2Findex.tsx