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

/**
 * 父组件向子组件传参设置默认值
 */
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 (
    
      
      {childMsg}
    
  );
};

export default Index;


3、运行效果

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

react中父组件的通信_第1张图片

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

react中父组件的通信_第2张图片

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

总结

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

你可能感兴趣的:(react.js,前端,前端框架)