13｜组件表与里（下）：用接口的思路设计开发React组件
面向接口编程
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文深入探讨了React组件设计中接口的重要性，并介绍了如何合理地使用props、state、context等接口。重点讨论了React组件的接口实现，包括props、state、context、事件处理、Hooks、子组件和组件样式等。通过实际例子和技术概念，读者可以快速了解React应用开发中接口设计和组件开发的关键技术特点。此外，文章还介绍了在重构`oh-my-kanban`应用中的第二步，即将逻辑转移到各组件中的过程，以降低父组件的复杂度。通过分步骤的重构方法，读者可以学习到如何将KanbanCard相关的逻辑从App转移到KanbanColumn中。文章还介绍了状态提升（Lifting State Up）的技巧，以及如何用context解决属性钻取问题。总的来说，本文内容丰富，适合对React应用开发感兴趣的读者阅读学习。
《现代 React Web 开发实战》，新⼈⾸单¥59
全部留言(14)
- 最新
- 精选
船长反馈个 Bug：文章里的 KanbanCard 判断是否展示删除按钮时，isAdmin 会始终为 True，因为从 useContext 引出来后，其值是：{isAdmin:false}，是个 obj，始终为 true，删除按钮会一直显示作者回复: 你好，船长，感谢抓虫，不过我重新跑了一下 https://gitee.com/evisong/geektime-column-oh-my-kanban/tree/v0.13.0 的代码，没能复现你提到的问题。 目前代码中AdminContext就是一个布尔值，你提到的“{isAdmin:false}，是个 obj”，我怀疑你是不是在为Provider传值时传了obj？类似这样： - <AdminContext.Provider value={isAdmin}> + <AdminContext.Provider value={{isAdmin}}> 如果这么改代码的话，我本地确实能复现始终显示删除按钮的问题。
2022-09-26归属地：北京31- Geek_a19712代码是不是写错了，上边 KanbanCard 删除的方法传的是 title ，但是在 App.js 中的 handleRemove 方法中过滤的条件是 item.title !== cardToRemove.title ，所以是不是应该把 KanbanCard 删除方法改成传 props 或者 App.js 中过滤条件 item.title !== cardToRemove.title 改成 item.title !== cardToRemove
作者回复: 你好，Geek_a19712，感谢你的抓虫。我检查了一下，不是虫。还是这一讲的内容，在“用 context 解决属性钻取问题”小节的代码中，handleRemove函数是作为prop值一路传给KanbanCard的onRemove，看一下KanbanCard是如何调用这个onRemove的： <button onClick={() => onRemove({title})}>X</button> 可以看到这里传给cardToRemove参数的值是 {title}，等同于 const cardToRemove = { title: title } 是一个object。所以后续做过滤的时候也需要从object里取title属性。这也是为了跟拖拽逻辑里的参数保持一致。
2023-08-28归属地：天津2 
网瘾少年M https://github.com/xzxldl55/FE-collection/tree/main/task-board作者回复: 赞！
2023-07-25归属地：江西
派大心M_M作者回复: ^_^
2023-07-16归属地：北京- Geek_b8f92f请问老师： 代码中有大量的onDragStart && onDragStart(evt)这种写法 为什么不是直接写成onDragStart(evt)， 这么写的好处是什么，谢谢
作者回复: 你好，Geek_b8f92f，这是个好问题。func && func(args) 是指func不为空时才会去调用它，这样的写法能提升程序的健壮性，也可以利用ES2020的新语法func?.(args)，效果是相同的。但请注意一点，这里仅判断了是否为空，如果需要进一步提升健壮性，还需要判断func的类型typeof func === 'function'。 当然，这也并不意味着我们需要在所有使用参数的地方都去做类似的检查，还是要根据实际需要。如果感兴趣的话，可以了解一下防御性编程。
2023-06-11归属地：上海 
进击的莫莫哒M作者回复: 你好，进击的莫莫哒，非常高兴看到你对自己写的代码满意。
2022-10-16归属地：北京- Geek_8e9c8dM
作者回复: 你好，Geek_8e9c8d，非常高兴看到你对自己写的代码满意。
2022-10-11归属地：北京 
WL老师讲得很好，组件也可以看作是接口，我们通过props传入一些内容，组件帮我们实现一些功能，组件不负责保存上级组件的状态作者回复: 你好，WL，（握手），你说得对，尤其“组件不负责保存上级组件的状态”这一点，是React数据流保持单向性的必要条件。
2022-09-26归属地：北京- 船长思考题 2： 父-子通信：props，context 子-父通信：props.callback() --（查课外资料） 兄弟通信：context
作者回复: 你好，船长，答案基本正确～ * 子-父通信：父组件通过props或context传递回调函数给子组件，子组件调用回调来实现； * 兄弟通信：如A与B通信，拆分成 子(A)-父通信 加上 父-子(B)通信
2022-09-26归属地：北京2 - 船长思考题 1：有父子、祖孙之间的 props 传递流，也有组件内部的 state 数据流，也有 context 共享数据流（可以忽略 props 的层层传递，直接一步到位）
作者回复: 你好，船长，很棒的答案。在设计oh-my-kanban这个项目时应该是把有代表性的数据流都做进去了，万一有遗漏的还请指出哈。
2022-09-26归属地：北京