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

}

在另一个类中，我正在初始化一个子对象并对其调用Function startManager（）。但随后我收到一条错误消息，说无法读取未定义的属性“start”。我是一个新的反应者，我认为我在定义孩子的属性时犯了一些错误。有人知道我做错了什么吗。谢谢

Answer 1

你不能像那样实例化你的组件，你需要为你做出反应，只有这样，整个道具/状态的事情才会起作用。

您可以使用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 } />
      )
   }
}