Javascript 子组件中的间隔父函数

我试图在react中将父函数传递给子组件，并在子组件中设置一个间隔来调用父函数。我知道这似乎很容易，但我是react的新手。 在第一次间隔执行后，我出现了“this.func不是函数”错误 这是我的密码

export default class Child extends React.Component{
    func;
    constructor(props) {
        super();
        this.func = props.func;
    }
    componentDidMount() {
        setInterval(() => {this.func() }, 1000);
    }
    componentWillUnmount() {
        
    }
    render() {
        return (
            <div>
                <p>{this.props.value}</p>
            </div>
        );
    }
}
import React from 'react';
import Child from './child';
export default class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            counter:0
        }
    }
    increase() {
        this.setState({counter:this.state.counter+1});
    }
   
    render() {
        return (
            <div>
                <Child proc={this.increase} value={this.state.counter}></Child>
            </div>
        );
    }
}

导出默认类子类扩展React.Component{
func；
建造师（道具）{
超级（）；
this.func=props.func；
}
componentDidMount（）{
setInterval（（）=>{this.func（）}，1000）；
}
组件将卸载（）{
}
render（）{
返回(
{this.props.value}

);
}
}
从“React”导入React；
从“./Child”导入子项；
导出默认类父级扩展React.Component{
构造函数（）{
超级（）；
此.state={
柜台:0
}
}
增加{
this.setState（{counter:this.state.counter+1}）；
}
render（）{
返回(
);
}
}

在您的家长中，您将道具

过程传递给您的孩子

import React from 'react';
import Child from './child';
export default class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            counter:0
        }
    }
    increase() {
        this.setState({counter:this.state.counter+1});
    }
   
    render() {
        return (
            <div>
                <Child proc={this.increase} value={this.state.counter}></Child>
            </div>
        );
    }
}

在家长中，您将道具
proc
传递给您的孩子

import React from 'react';
import Child from './child';
export default class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            counter:0
        }
    }
    increase() {
        this.setState({counter:this.state.counter+1});
    }
   
    render() {
        return (
            <div>
                <Child proc={this.increase} value={this.state.counter}></Child>
            </div>
        );
    }
}

让我们确定两件事：


将父对象绑定到方法
Bind（this）
：当您从
Child
调用this.func（）时，它仍然由
parent
对象执行




func get by props.proc on Child，因为send by
proc={this.increase.bind（this）}

构造函数（道具）{
超级（）；
this.func=props.proc；
}

祝你好运。
让我们确定两件事：


将父对象绑定到方法
Bind（this）
：当您从
Child
调用this.func（）时，它仍然由
parent
对象执行




func get by props.proc on Child，因为send by
proc={this.increase.bind（this）}

构造函数（道具）{
超级（）；
this.func=props.proc；
}

祝您好运。
对于子-父通信，您应该将设置状态的函数从父级传递给子级，如下所示

export default class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
         counter : 0
    }
    this.increase = this.increase.bind(this)
  }

  increase() {
     this.setState({ counter: this.state.counter + 1 });
  }

  render() {
    return (
         <div>
            <Child proc={this.increase} value={this.state.counter}></Child>
         </div>
  }
}

class Child extends React.Component {
  constructor(props) {
    super();
  }
  componentDidMount() {
     setInterval(() => {this.props.proc() }, 1000);
  }
  render() {
    return (
        <div>
            <p>{this.props.value}</p>
        </div>
    );
  }
}

对于子-父通信，您应该将设置状态的函数从父级传递给子级，如下所示

export default class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
         counter : 0
    }
    this.increase = this.increase.bind(this)
  }

  increase() {
     this.setState({ counter: this.state.counter + 1 });
  }

  render() {
    return (
         <div>
            <Child proc={this.increase} value={this.state.counter}></Child>
         </div>
  }
}

class Child extends React.Component {
  constructor(props) {
    super();
  }
  componentDidMount() {
     setInterval(() => {this.props.proc() }, 1000);
  }
  render() {
    return (
        <div>
            <p>{this.props.value}</p>
        </div>
    );
  }
}

非常感谢它能起作用虽然我必须在父级中向func添加bind（这个）…非常感谢它能起作用虽然我必须在父级中向func添加bind（这个）。。