ReactJS中子类中父类的访问状态和方法

Question

我在 ReactJS 中有一个子类和一个父类。我希望我的孩子访问父母的状态，每毫秒更新一次。孩子也应该可以访问一些父母的方法。

家长：

interface StatesZeit{
        datum : Date;
    }

    export default class StoppUhr extends React.Component<undefined, StatesZeit>{
        uhrID : number;

        constructor(){
            super();
            this.state = {
                datum : new Date(0),
            };
            this.start = this.start.bind(this);
            this.stopp = this.stopp.bind(this);
            this.counter = this.counter.bind(this);
        }

        start() {
            this.uhrID = setInterval(() => {
                this.counter();
            }, 0);
        }

        stopp() {
            clearInterval(this.uhrID);
        }

        counter() {
            this.setState({
                datum : new Date()
            });
        }

        render(){ // Returns the Child and passes the states as properties
            return (
                <ZeitManager stopp={this.stopp.bind(this)}
                             start={this.start.bind(this)}
                             counter={this.counter.bind(this)}
                             timeState={this.state.datum}/>
            )
        }
    }

孩子

export interface PropsZM {
    timeState : Date;
    start(); // not sure if correct, should somehow reference functions of parent
    stopp();// not sure if correct, should somehow reference functions of parent
    counter();// not sure if correct, should somehow reference functions of parent
}

export class ZeitManager extends React.Component<PropsZM, undefined>{
    private _millisec : number;

    constructor(){
        super();
        this.startManager = this.startManager.bind(this);
        this.stoppManager = this.stoppManager.bind(this);
    }

    startManager() {
        this.props.start();
    }

    stoppManager() {
        this.props.stopp();
        this._millisec = this.props.timeState.getMilliseconds();
    }

    counterManager() {
        this.props.counter;
    }

    get millisec(): number {
        return this._millisec;
    }

    render(){
        return <div>{this.props.start}</div>;
    }

}

在另一个类中，我正在初始化一个子对象并在其上调用函数 startManager()。但随后我收到一条错误消息，提示 无法读取未定义的属性“开始”。我是 React 的新手，我认为我在这里定义孩子的属性时做错了。有谁知道我在这里做错了什么。谢谢

Answer 1

你不能像那样实例化你的组件，你需要 React 为你做这件事，只有这样整个 props/state 的东西才能工作。

你可以使用React.createElement:

zm = React.createElement(ZeitManager);

或者获取实例的引用：

function useZeitManager(instance: ZeitManager) {
    // do what ever with it
}

export default class StoppUhr extends React.Component<undefined, StatesZeit>{
    ...

   render() {
      return (
         <ZeitManager 
            ref={ el => useZeitManager(el) }
            stopp={ this.stopp.bind(this) }
            start={ this.start.bind(this) }
            counter={ this.counter.bind(this) }
            timeState={ this.state.datum } />
      )
   }
}