一、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提供了大量能使我们快速便捷地处理数据的函数和方法。