javascript - 如何使用 Typescript 在 React 中从主组件调用子组件的方法？

Question

我正在尝试访问组件本身，以便我可以调用它的方法，但我没有成功。

我有一个简单的TestComponent，其中有一个print() 方法。我想从 MainComponent 调用 print() 方法。所以我做了这样的事情:

class TestComponent extends React.Component<IProps, IState) {

   print() {
      console.log('From TestComponent');
   }

   render() {
      return <h1>Item</h1>;
   }
}

class MainComponent extends React.Component<IProps, IState) {

   private list:Array<TestComponent>;   //This is going to throw an error in Typescript. It expects type of JSX Element.

   render() {
      for(let i=0; i<5; i++) list.push(<TestComponent/>);   //<TestComponent> is recognised as a JSX element instead so this will throw an error
      list.forEach((component) => component.print());   //Since this is JSX Element, calling print() will throw unknown function print() error.
      return <h1>Main Component</h1>{list};
   }
}

事实证明，我无法使用 TestComponent 作为 Typescript 中的对象类型。我必须将 list 数组的类型设置为 JSX.Element 才能正常工作。但如果我这样做，我就无法“向上转换”类型以从 MainComponent 调用 TestComponent 的 print() 方法。 p>

那么，如何从包含子组件的主组件中调用子组件的方法呢？

并且，在 Typescript 中，我应该如何定义组件的类型？

Answer 1

这不是 React 应该使用的方式。
控制子元素的方式是通过向它们传递 props，而不是通过执行方法。

例如:

interface IProps {
    toPrint: boolean;
}

class TestComponent extends React.Component<IProps, IState) {
    print() {
        console.log('From TestComponent');
    }

    render() {
        if (this.props.toPrint) {
            this.print();
        }

        return <h1>Item</h1>;
    }
}

class MainComponent extends React.Component<IProps, IState) {
    render() {
        let kids: JSX.Element[] = [];
        for (let i = 0; i < 5; i++) {
            list.push(<TestComponent toPrint={ true } />);
        }

        return <h1>Main Component</h1>{ list };
    }
}

如果您需要保存对现有子元素的引用，那么您需要使用 Refs to Components它有几种做事的方式，例如:

class MainComponent extends React.Component<IProps, IState) {
    private list: Array<TestComponent> = [];

    render() {
        let kids: JSX.Element[] = [];
        for (let i = 0; i < 5; i++) {
            list.push(<TestComponent toPrint={ true } ref={ (t) => this.list.push(t) } />);
        }

        return <h1>Main Component</h1>{ list };
    }
}