子组件中的区间父函数

问题描述

我试图在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>
        );
    }
}

解决方法

在您的父母中，您将道具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>
        );
    }
}

在子组件中，首先将您的props传递给super关键字。无需将函数存储在Child组件的属性中，因为它将始终作为传递的属性存在。

使用与传递prop相同的关键字来调用该函数。在这种情况下，proc。

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

,

让我们修复两件事：

• 将父项绑定到方法global $wpdb; $query = '<your query here>'; $results = $wpdb->get_results($query); foreach ($results as $row) { echo 'ID: ',$row->dataid; echo 'Name: ',$row->fname,' ',$row->sname; echo 'Comment: ',$row->comment; } ：从bind(this)调用this.func（）时，它仍由Child对象执行。

Parent

• func通过child上的props.proc获得，因为通过<Child proc={this.increase.bind(this)} value={this.state.counter}></Child> 发送

proc={this.increase.bind(this)}

祝你好运。

,

对于孩子-家长沟通，您应该传递一个函数来设置从家长到孩子的状态，就像这样

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

This way the child can update the parent's state with the call of a function passed with props.