子组件中的间隔父函数答案

【问题标题】：interval parent function in child component子组件中的间隔父函数
【发布时间】：2021-01-10 13:16:51
【问题描述】：

我正在尝试将父函数传递给反应中的子组件并在子组件中设置间隔以调用父函数..我知道这看起来很容易，但我是反应新手。第一次间隔执行后，我收到此错误“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>
        );
    }
}

【问题讨论】：

标签： javascript reactjs components state intervals

【解决方案1】：

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

【讨论】：

非常感谢它的工作原理..尽管我必须在父级中添加 bind(this) 到 func..

【解决方案2】：

让我们解决两件事：

绑定父方法bind(this)：当你从Child调用this.func()时，它仍然由Parent对象执行。

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

func 由 props.proc 在 Child 上获取，因为通过 proc={this.increase.bind(this)} 发送

constructor(props) {
        super();
        this.func = props.proc;
    }

祝你好运。

【讨论】：

【解决方案3】：

对于子-父通信，您应该传递一个函数来设置从父到子的状态，像这样

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.

【讨论】：