Li Hui Blog

Li Hui Blog
在时代的层林尽染中书写时代的年华。效能(2022)
  1. 首页
  2. 未分类
  3. 正文

React JSX语法再实践

1月 7, 2022 398点热度 0人点赞 0条评论

我们上一节封装了一个按钮,这一节我们继续理解封装的概念和了解封装组件需要注意的事项

首先我们回顾上一篇最后的代码,代码如下

const Button = ({color,text}) =>{
    return {
        type: 'button',
        props: {
            className: `btn btn - $ {
                color
            }`,
            children: {
                type: 'em',
                props: {
                    children: text,
                },
            },
        },
    };
}

我们最终调用的形式如下所示 Button({color:'blue', text:'Confirm'}) 进行创建,其实我们发现 Button 和 button 或者和 em 一样都可以 作为一个元素存在,我们可以以 Button 为基础创建特定属性的按钮,将其称为自定义类型的元素 或者可以称为组件元素。和上一节相同,我们可以采用 JSON 结构来描述它

{
 type: Button,
 props: {
  color: 'blue',
  children: 'Confirm'
 }
}

上述结构和我们文中的第一个结果,因此可以进一步的对其中的元素做封装

比如我们对通常使用警告的颜色为红色, 但是我们红色提示的文字可能不同,此处我们封装一个危险的按钮的示例

const dangerButton =({text}) => ({
  type: Button,
  props: {
    color: 'red',
    children: text  
}
})

比如书中给了一个很好的示例

const DeleteAccount = () = >({
    type: 'div',
    props: {
        children: [{
            type: 'p',
            props: {
                children: 'Are you sure?',
            },
        },
        {
            type: DangerButton,
            props: {
                children: 'Confirm',
            },
        },
        {
            type: Button,
            props: {
                color: 'blue',
                children: 'Cancel',
            },
        }],
    }
});

这是一个弹出的删除账户的组件,其中有文字以及确定和取消的按钮,删除账户的组件就完成了。

我们后面将继续介绍 JSX 的语法

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: react
最后更新:1月 7, 2022

Li Hui

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

Li Hui

这个人很懒,什么都没留下

归档
  • 2022年10月 / 1篇
  • 2022年6月 / 1篇
  • 2022年1月 / 6篇
  • 2021年2月 / 1篇
  • 2021年1月 / 8篇
  • 2020年12月 / 1篇
  • 2020年11月 / 2篇
  • 2020年9月 / 23篇
分类
  • Git系列 / 6篇
  • Linux / 10篇
    • CLI应用 / 2篇
    • Docker / 1篇
  • Shell / 2篇
  • Uncategorized / 1篇
  • 从0到1 / 1篇
  • 博客优化 / 3篇
  • 各系列总章节 / 1篇
  • 周年总结 / 1篇
  • 安全 / 2篇
  • 年度总结 / 1篇
  • 年度计划 / 1篇
  • 感想 / 3篇
  • 技术 / 2篇
    • gocd / 1篇
  • 敏捷开发 / 1篇
  • 未分类 / 6篇
  • 知识 / 1篇
  • 读书 / 3篇

COPYRIGHT © 2021 lihui.net. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

京ICP备2020048539号-3