编写一个 React 组件库（二）：提取公用 defaultProps

最新推荐文章于 2025-07-02 17:40:14 发布

原创

最新推荐文章于 2025-07-02 17:40:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react #组件 #组件库

本文介绍如何在React组件库中提取公共defaultProps，通过创建一个defaultProps.js文件来存放共用属性，如className和size，并在具体组件中引入使用，确保组件间的属性一致性。通过示例展示了修改defaultProps后对组件的影响。

上一次编写了一个简单的 Button 组件：https://blog.youkuaiyun.com/qq593249106/article/details/85319295

当前目录结构

|- /config //webpack配置项
  |- ......
|- /dist //出口文件
  |- ......
|- /node_modules
|- /src //入口文件
  |- components //组件
    |- Button

最低0.47元/天解锁文章

新学期VIP享超值加赠

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Lkkkkkkg

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React Native组件库推荐：20个必备UI组件提升开发效率

移动开发前沿的博客

05-23

2101

本文聚焦React Native开发者的**“开发效率痛点”**：重复造轮子（如按钮、输入框）、多端样式不一致、复杂交互实现困难。通过推荐20个经过社区验证的优质组件库，覆盖从基础到高级的全场景需求，帮助开发者跳过“造组件”阶段，直接进入“用组件”的高效开发模式。本文先通过“建房子”比喻解释组件库的价值，再按功能场景分类推荐20个组件库（附核心功能+代码示例），最后通过实战案例演示如何集成使用，解答“选哪个”“怎么用”“何时用”的关键问题。想象你要建一栋房子：如果每次都要自己烧砖、砍木头、做门窗，工期会很长

编写一个 React 组件库（一）：写一个简单的 Button 组件

qq593249106的博客

12-28

3761

参与评论您还未登录，请先登录后发表或查看评论

【如何提取React项目中的公共模块，多个项目共用】

风行天下

12-17

1683

把多个项目的共用部分提取出来成为一个公共模块，然后在各个项目里都引入这个公共模块进行使用，减少维护公共代码的工作量。

React官方文档： default props的使用

amadeus_liu2的博客

12-20

353

react

Chakra UI：让React开发爽到飞起的组件库（真的！）

最新发布

reactninja42的博客

07-02

706

用了Chakra UI一年后，我发现自己前端焦虑症明显缓解了。不用再纠结class命名规范，不用再为组件API设计掉头发。它就像个懂你的搭档，总能在你想"这里该加个反馈效果"时，发现_active伪属性早已就位。当然它也有槽点——文档偶尔跳转404，TypeScript类型有时要手动扩展。但每次看到控制台打出“啊哈！又可以准时下班了！🎉项目地址：https://github.com/chakra-ui/chakra-ui。

插件化技术-提取公共库插件

LUFANZHENG的专栏

08-14

1091

上节我们创建了一个应用插件 app.main，这个插件存在以下资源： app.main/src/main/res ├── values │ ├── colors.xml │ ├── dimens.xml │ └── styles.xml └── values-w820dp └── dimens.xml 这些资源定义了该应用的主题、界面边距等样式，在多个应用插件

可靠React组件设计的7个准则之SRP

Yvette Lau的专栏

08-08

562

翻译：刘小夕原文链接：https://dmitripavlutin.com/7-architectural-attributes-of-a-reliable-react-...

React组件规范

weixin_34254823的博客

08-24

167

1 有状态组件只有render方法才能返回JSX，因为JSX中的虚拟DOM有一个_owner属性，这与它与组件实例进行绑定。如果其他方法里使用了JSX，_owner就没有与组件实例进行绑定。像vue,只有一个地方（template或render）是与视图渲染相关的，一目了然。 2 render方法里面应该以<开头，不应该存在...

react-fuzzy-search::scroll: 一个用 React 编写的模糊搜索组件

05-31

React模糊 React 中的模糊搜索安装 npm install --save react-fuzzy 基本用法 const list = [ { id : 1 , title : 'The Great Gatsby' , author : 'F. Scott Fitzgerald' } , { id : 2 , title : 'The Da...

从0到1开发一个React组件库

小陈的博客

11-02

1963

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

React干货(二)：提取公共代码、建立路由Store、Check路由参数类型

weixin_33795093的博客

02-25

327

本项目地址：react-coat-spa-demo react-coat 同时支持单页浏览器渲染(SPA)和服务器渲染(SSR)，本 Demo 仅演示浏览器渲染，请先了解一下：react-coat v4.0 接上篇：React干货(一) SPA单页如何规划路由、设计Store、划分模块、按需加载你可能觉得本Demo中对路由封装过于重度，以及不喜欢使用Class继承的方式来组织Model。没...

react 组件怎么公用_详解React中共享组件逻辑的三种方式

weixin_32287177的博客

02-04

1426

废话少说，这三种方式分别是：render props、高阶组件和自定义Hook。下面依次演示假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间，像这样：const TimeOnPage = () => {const [second, setSecond] = useState(0);useEffect(() => {setTimeout(() => {setSe...

React中提取组件并在父组件中使用

lzf15382354970的博客

08-22

366

@React 实现效果：父组件中点击button会跳出一个弹框，现在将这个弹框提取出一个组件。分析：单独编写一个子组件，通过visible来控制弹框的出现。此时是通过state状态来改变visible数据状态的变化。而现在父组件控制子组件，父组件通知子组件的出现（visible），可以直接通过父组件向子组件传值实现。子组件通过props来接受，但是在关闭弹框中仍然要使用visible来控制...

react学习之通用组建

youyudexiaowangzi的专栏

02-25

167

react中，组件b实现了一个小组件Custom， class Appb extends Component { constructor(props){ super(props); this.state = { val1:'walala', }; } render() { return ( <div> ...

react 组件怎么公用_如何使用Webpack设置React组件的私有共享库

weixin_39819152的博客

12-19

I have a number of React components that I use in multiple Webpack projects, and I want to share them via NPM. So naturally I:put those components into a (private) GitHub repoAdded that repo to a mai...

React基础（SCU，公共逻辑抽离）—第二部分

张小杰

06-30

854

文章目录SCU、PureComponent与memoSCU：shouldComponentUpdatePureComponent和memo关于组件公共逻辑的抽离高阶组件Render PropsHOC vs Render PropsRedux基本概念store stateactionreducer单项数据流react-redux异步action中间件 SCU、PureComponent与memo SCU：shouldComponentUpdate React默认：父组件有更新，子组件无条件更新！！因此在不

react组件复用提取，注册为公共组件

gittt的博客

01-29

743

当一个组件使用于每一个页面，为了方便简单的使用，不必要每次都进行将所有的代码进行编写，再遇到复杂件的时候，我们为了减少每个页面代码量，也为了方便后期对系统代码的维护，减少工作量。可以将其注册为公共组件，从而进行每个页面进行引用使用。

React 5 种组件提取思路与实践

jydchudq的博客

04-23

765

在开发时，经常遇到一些高度重复但略有差异的 UI 模式，此时我们当然会把组件提取出去，但是组件提取的方式有很多，怎么根据不同场景选取合适的方式呢？尤其时在复杂的业务场景中，组件提取的思路影响着着代码的可维护性、可读性以及扩展性。本文将以一个[详情]组件为例，探讨 5 种不同的 React 组件提取思路，分析它们的适用场景与实现技巧。

react将多个公共组件归成一类，方便调用

weixin_30736301的博客

07-01

892

目录结构 . ├── component # 公共组件存放 ├ ├── example ├ ├ ├── example1.ts # 例子1 ├ ├ ├── example2.ts # 例子2 ├ ├ ├── example3.ts # 例子...