react父组件props变化的时候子组件怎么监听?

在 React 中,子组件可以通过 componentDidUpdate 钩子函数来监听父组件的 props 变化。这个钩子函数会在组件更新之后调用,可以通过比较前后的 props 值来判断是否发生了变化。

以下是一个示例代码,展示了父组件 props 变化时子组件的监听:

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  }

  render() {
    const { value } = this.state;

    return (
      <div>
        <button onClick={this.handleClick}>Increase</button>
        <ChildComponent value={value} />
      </div>
    );
  }
}

class ChildComponent extends Component {
  componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      console.log('Prop value has changed');
    }
  }

  render() {
    const { value } = this.props;

    return (
      <div>
        <p>Value: {value}</p>
      </div>
    );
  }
}

export default ParentComponent;

在上面的示例中,当父组件的 value 值发生变化时,子组件的 componentDidUpdate 函数会被调用,然后可以进行相应的处理。

相关推荐

最近更新

  1. TCP协议是安全的吗?

    2023-12-29 14:38:04       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-29 14:38:04       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-29 14:38:04       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-29 14:38:04       18 阅读

热门阅读

  1. 【linux系统安装部署私有化的GitLab】

    2023-12-29 14:38:04       33 阅读
  2. 解除mobaxterm会话14个限制

    2023-12-29 14:38:04       36 阅读
  3. 【Qt】Qt中通过QProcess::execute()调用echo命令不生效

    2023-12-29 14:38:04       31 阅读
  4. 通配符和正则表达式

    2023-12-29 14:38:04       41 阅读
  5. Vue3 教程

    2023-12-29 14:38:04       36 阅读
  6. C++高级-模板详解

    2023-12-29 14:38:04       32 阅读
  7. 《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5

    2023-12-29 14:38:04       40 阅读
  8. udp异步方式接收消息

    2023-12-29 14:38:04       36 阅读
  9. 【C++】内存泄漏排查

    2023-12-29 14:38:04       33 阅读
  10. Avalonia 多绑定(Multi-binding)

    2023-12-29 14:38:04       37 阅读