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

我在ReactJS中有一个子类和一个父类。我想让我的孩子访问每毫秒更新一次的家长状态。此外，孩子还可以访问一些家长方法

起源：

接口状态SEIT{
数据：日期；
}
导出默认类StoppUhr扩展React.Component{
uhrID：数字；
构造函数（）{
超级（）；
此.state={
基准：新日期（0），
};
this.start=this.start.bind（this）；
this.stop=this.stop.bind（this）；
this.counter=this.counter.bind（this）；
}
开始（）{
this.uhrID=setInterval（（）=>{
这个计数器（）；
}, 0);
}
停止（）{
clearInterval（this.uhrID）；
}
计数器（）{
这是我的国家({
数据：新日期（）
});
}
render（）{//返回子级并将状态作为属性传递
返回(
)
}
}

小孩

导出接口PropsZM{
时间状态：日期；
start（）；//不确定是否正确，应该以某种方式引用父函数
stop（）；//不确定是否正确，应该以某种方式引用父函数
counter（）；//不确定是否正确，应该以某种方式引用父函数
}
导出类ZeitManager扩展React.Component{
私有_毫秒：数字；
构造函数（）{
超级（）；
this.startManager=this.startManager.bind（this）；
this.stoppManager=this.stoppManager.bind（this）；
}
startManager（）{
this.props.start（）；
}
经理（{
this.props.stop（）；
this._millisec=this.props.timeState.getmillises（）；
}
柜台经理（）{
这是道具柜台；
}
获取毫秒（）：数字{
返回此值。\u毫秒；
}
render（）{
返回{this.props.start}；
}
}

---

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

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

您可以使用：

或获取对实例的引用：

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 } />
      )
   }
}

函数useZeitManager（实例：ZeitManager）{
//用它做什么
}
导出默认类StoppUhr扩展React.Component{
...
render（）{
返回(
useZeitManager（el）}
stop={this.stop.bind（this）}
start={this.start.bind（this）}
计数器={this.counter.bind（this）}
timeState={this.state.datum}/>
)
}
}

如何在另一个类的构造函数中“初始化子对象”。像constructor（）{super（）；this.zeitmanager=new zeitmanager（）}一样，我调用zm对象上的函数。与zm.startManager（）一样，谢谢，我将如何使用另一个类中的此引用？取决于这些类之间的交互对象以及您的总体设计。我刚刚添加了

useZeitManager

函数，但是您可以使用现有实例的方法

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

}

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 } />
      )
   }
}