重构此反应组件并保持干燥的最佳方法是什么？

发布于 2025-02-06 05:33:52 字数 222 浏览 2 评论 0原文

我一直在试图重构这种反应组件，并考虑保持干燥的方法（不要重复自己）。那么，重构此反应组件并保持干燥的最佳方法是什么？

这是codesandbox

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

假装爱人 2025-02-13 05:33:53

您为什么认为该组件不是干？如果您的组件（例如scheduletimetextspan）为stypled-components（这是我的假设），那么它们只是带有预填充样式的HTML元素，因此可以重复它们。唯一可以帮助您干的唯一组件可能是对代码部分进行重构：

<ScheduleTimeText>
 Appointment due:
 <ScheduleTimeTextSpan>
   {content.appointmentDue}
 </ScheduleTimeTextSpan>
</ScheduleTimeText>

重复的代码部分，将其重复为自我组件：

const AppointmentDue = ({content}) => (
   <ScheduleTimeText>
     Appointment due:
     <ScheduleTimeTextSpan>
       {content.appointmentDue}
     </ScheduleTimeTextSpan>
   </ScheduleTimeText>
)

然后调用：＆lt; timmentDue content = {{ content} /＆gt; < /code>

这将保存一些文本行。

Why do you think the component is not DRY? If your components like ScheduleTimeTextSpan are styled-components (which is my assumption) then they are just HTML elements with prefilled styles so it is okay to repeat them. The only thing that might help you DRY a little bit the component might be refactoring the code sections like:

<ScheduleTimeText>
 Appointment due:
 <ScheduleTimeTextSpan>
   {content.appointmentDue}
 </ScheduleTimeTextSpan>
</ScheduleTimeText>

which are repeated, to a self component:

const AppointmentDue = ({content}) => (
   <ScheduleTimeText>
     Appointment due:
     <ScheduleTimeTextSpan>
       {content.appointmentDue}
     </ScheduleTimeTextSpan>
   </ScheduleTimeText>
)

and then calling: <AppointmentDue content={content} />

This will save some lines of text.

回复收藏 0 原文

~没有更多了~