Typescript에 반응하여 주 구성 요소에서 하위 구성 요소의 메서드를 호출하는 방법?

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

그것은 내가 타이프에서 개체 유형으로 TestComponent을 사용할 수 없다는 것을 밝혀 : 그래서 이런 일을했다. 내 list 배열의 형식을 JSX.Element으로 설정해야 작동합니다. 그러나 그렇게한다면 TestComponent의 print() 메서드를 MainComponent에서 호출하도록 형식을 "상향 캐스트"할 수 없습니다.

하위 구성 요소가 포함 된 주 구성 요소에서 하위 구성 요소의 메서드를 호출하려면 어떻게해야합니까?

Typescript에서 구성 요소 유형을 어떻게 정의해야합니까?

Answer 1

이것은 반응을 사용하는 방식이 아닙니다.
하위 요소를 제어하는 ​​방법은 메서드를 실행하지 않고 해당 요소에 소품을 전달하는 것입니다. 예를 들어

:

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

을