umi搭建react+antd项目(六)父子组件通讯

本文介绍如何在React应用中实现父子组件之间的通讯,通过一个具体的例子展示了在子组件中修改父组件数据的方法,包括在父组件定义更新方法并传递给子组件,以及子组件调用该方法来改变父组件的状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

上一篇写了一个子组件,只是把值传入进来,这篇讲解在子组件修改父组件的数据

1.在index.js里,新增方法:updateImg 用于修改list集合

  updateImg() {
    this.setState({
      list: [
        {
          "src": "http://dummyimage.com/468x60"
        }
      ]
    });
  }

在子组件上传入该方法:

<ListComponent updateImg={this.updateImg.bind(this)} list={this.state.list}/>

完整代码:

import React, {Component} from 'react';
import Link from 'umi/link';
import instance from '../conf/axiosConf';
import ListComponent from '../component/list'

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    }
  }

  componentDidMount() {
    instance.get("api/img").then(data => {
      this.setState({list: data.list});
    })
  }

  updateImg() {
    this.setState({
      list: [
        {
          "src": "http://dummyimage.com/468x60"
        }
      ]
    });
  }

  
### 如何结合 UMIReactAntd 进行项目开发 #### 1. 使用 `yarn` 或 `npm` 初始化项目 通过官方推荐的方式初始化一个基于 React 和 Ant Design Pro 的 UMI 项目。以下是具体操作: ```bash $ yarn create umi my-app Select the boilerplate type: 选择 Ant Design Pro ❯ ant-design-pro Which language do you want to use? 选择你使用的语言 ❯ TypeScript / JavaScript $ cd my-app $ yarn $ yarn start ``` 运行上述命令后,可以通过浏览器访问 [http://localhost:8000](http://localhost:8000) 来查看项目的初始界面[^4]。 --- #### 2. 路由配置与页面管理 UMI 提供了一种简单的方式来定义路由结构。默认情况下,Ant Design Pro 已经集成了动态路由功能。开发者只需按照约定目录结构调整文件即可完成大部分路由设置。 例如,在 `src/pages` 文件夹下新增一个名为 `about.js` 的文件: ```javascript import { PageContainer } from &#39;@ant-design/pro-layout&#39;; import { Typography } from &#39;antd&#39;; const AboutPage = () => { return ( <PageContainer> <Typography.Title>关于</Typography.Title> <Typography.Paragraph>这是一个简单的关于页面。</Typography.Paragraph> </PageContainer> ); }; export default AboutPage; ``` 此时无需额外修改路由配置文件,UMI 将自动识别并加载该页面作为 `/about` 路径下的内容[^3]。 --- #### 3. 表单设计与数据交互 Ant Design 提供了强大的表单组件 Form,能够快速实现复杂的输入逻辑验证以及提交流程控制。下面是一个登录表单的例子: ```jsx import React, { useState } from &#39;react&#39;; import { Form, Input, Button, message } from &#39;antd&#39;; const LoginForm = () => { const onFinish = (values) => { console.log(&#39;Received values of form:&#39;, values); message.success(&#39;Login successful!&#39;); }; return ( <Form name="login_form" onFinish={onFinish}> <Form.Item label="Username" name="username" rules={[{ required: true, message: &#39;Please input your username!&#39; }]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: &#39;Please input your password!&#39; }]} > <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; export default LoginForm; ``` 此代码片段展示了如何利用 Ant Design 的 Form 组件构建用户友好的前端表单。 --- #### 4. 自定义权限按钮封装 为了增强系统的安全性,通常需要对某些 UI 元素实施细粒度的权限校验机制。以下是如何借助自定义组件来实现这一目标的方法之一: ```jsx import React from &#39;react&#39;; import { Button as AntdButton } from &#39;antd&#39;; const AuthButton = ({ permissions, requiredPermissions, children, ...restProps }) => { if (!permissions.some((perm) => requiredPermissions.includes(perm))) { return null; // 如果无权,则隐藏整个按钮 } return <AntdButton {...restProps}>{children}</AntdButton>; }; // 示例调用方式 <AuthButton permissions={[&#39;admin&#39;, &#39;editor&#39;]} requiredPermissions={[&#39;admin&#39;]} > Delete User </AuthButton> ``` 这段代码实现了仅当用户的权限列表满足特定条件时才渲染对应的操作按钮的功能[^5]。 --- #### 5. 风格化主题定制 Ant Design 支持高度灵活的主题定制能力,允许调整全局变量以适配品牌视觉规范或其他个性化需求。编辑 `.umirc.ts` 或者 `config/config.ts` 中的相关字段即可生效。 示例配置如下所示: ```typescript export default { theme: { primaryColor: &#39;#ff7a00&#39;, }, }; ``` 这样便能轻松更改应用中的主导航栏颜色以及其他关联样式属性。 --- ### 注意事项 尽管 react-antd-admin 曾被广泛采用,但由于其已被标记为废弃状态,建议优先考虑迁移到更现代化且持续维护更新的解决方案——即 Ant Design Pro[^2]。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值