Question

我试图访问一个组件本身，以便我可以调用它的方法，但我还没有成功。

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

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

事实证明，我无法在Typescript中使用TestComponent作为对象类型。我必须将list数组的类型设置为JSX.Element才能使其正常工作。但是，如果我这样做，我不能＆＃34; up-cast＆＃34;要从TestComponent调用print()＆＃39; MainComponent方法的类型。

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

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

Answer 1

这不是应该如何使用反应控制子元素的方法是将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 };
    }
}

如何从React with Typescript中的主要组件调用子组件的方法？

1 个答案: