react中父组件的通信

一、react是什么？

二、使用步骤

1.子组件

2.父组件

3.运行效果

总结

一、react是什么？

       React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

二、使用步骤

1、子组件

子组件通过 props 获取从父组件传递的属性；defaultProps用来设置默认的属性值

import { Statistic, Button } from 'antd';

const Statistical = (props) => {
  // 获取父组件传来的参数
  const { title, value } = props;

  // 点击事件
  const handleClick = () => {
    console.log('点击子组件');
    props.getChildMsg('子组件向父组件发送信息1111');
  };

  return (
    <>
      <Statistic title={title} value={value} precision={2} />
      <Button type="primary" onClick={() => handleClick()}>
        子组件按钮
      </Button>
    </>
  );
};

/**
 * 父组件向子组件传参设置默认值
 */
Statistical.defaultProps = {
  title: '1111',
  value: 6666,
};

export default Statistical;

2、父组件

父组件通过在子组件的标签上添加属性和事件向子组件传递信息。

import { Card, Row, Col } from 'antd';
import Statistical from './component';
import { useState } from 'react';

const Index = () => {
  const [childMsg, setChildMsg] = useState('');

  let obj = {
    title: '支付金额',
    value: 1892,
  };

  // 获取子组件的内容
  const handleGetChildMsg = (msg) => {
    console.log('父组件：', msg);
    setChildMsg(msg);
  };

  return (
    <Card>
      <Statistical {...obj} getChildMsg={handleGetChildMsg} />
      {childMsg}
    </Card>
  );
};

export default Index;

---

3、运行效果

运行结果如下图一、图二所示

图一 父组件向子组件传递参数

 图二  子组件触发事件传递信息给父组件

总结

      以上就是今天要讲的内容，本文仅仅简单介绍了react组件的通信使用，而react提供了大量能使我们快速便捷地处理数据的函数和方法。