react typescript create ref以访问子对象的状态

Question

我想访问父组件中的子组件的状态，我不想在子组件中使用任何可以在父组件中设置变量的处理程序，或者我不想在父组件中提升状态。我怎么能使用ref的反应打字稿创建Ref并获得父组件中的孩子的状态？

家长：

export interface ParentProps {}

interface State {
    counter?: number
}

export class Parent extends React.Component<ParentProps, State> {
    private readonly childRef: React.RefObject<**what should I put here?**>
    constructor(props: ParentProps) {
        super(props)
        this.state = {
            counter: undefined
        }
        this.childRef = React.createRef<**what should I put here**>();
    }

    render(){
        <Child ref={childRef} **<- (this throws an error)** counter={this.state.counter}
        <button onClick={() => this.setState({counter: this.state.counter + 1})}>
             add
        </button>
    }
}

儿童：

export interface ChildProps {
  counter: number
}
    
interface State {
  some state variable that should be accessible in parent
}
    
export class Child extends React.Component<ChildProps, State> {
   some methods...
}

Answer 1

你可以试试

this.childRef = React.createRef<Child>(null);

render(){
        <Child ref={this.childRef}  counter={this.state.counter} />
        <button onClick={() => this.setState({counter: this.state.counter + 1})}>
             add
        </button>
    }

private readonly childRef: React.RefObject<Child>

或

private readonly childRef: React.RefObject<Child>()