在 React 中构建可重用组件

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签组件

react 最大的优势之一是其基于组件的架构，它允许开发人员构建模块化和可重用的 ui 部分。可重用的组件不仅可以节省时间，还可以确保整个应用程序的一致性。在这篇博文中，我们将探索在 react 中构建可重用组件的最佳实践，并提供实用的编码示例。

为什么要构建可重用组件？

在深入研究代码之前，我们先讨论一下为什么可重用组件很重要：

- 一致性：重用组件可确保整个应用程序的外观和感觉一致。
- 可维护性：隔离组件中的功能使您的代码更易于管理和更新。
- 效率：构建可重用组件可以节省开发时间，因为您可以利用现有组件，而不是从头开始创建新组件。

1. 从简单的组件开始

构建可重用组件的第一步是识别应用程序中经常使用的 ui 元素。首先创建简单的、独立的组件。

示例：按钮组件

import react from 'react';import proptypes from 'prop-types';import './button.css';const button = ({ label, onclick, type = 'button' }) =&gt; (  <button classname="btn" onclick="{onclick}" type="{type}">    {label}  </button>);button.proptypes = {  label: proptypes.string.isrequired,  onclick: proptypes.func,  type: proptypes.oneof(['button', 'submit', 'reset']),};export default button;

2. 使组件可配置

为了使组件真正可重用，它们应该可以通过 props 进行配置。这允许您自定义组件的外观和行为，而无需修改其内部代码。

示例：可配置按钮组件

import react from 'react';import proptypes from 'prop-types';import './button.css';const button = ({ label, onclick, type = 'button', classname = '', disabled = false }) =&gt; (  <button classname="{`btn" onclick="{onclick}" type="{type}" disabled>    {label}  </button>);button.proptypes = {  label: proptypes.string.isrequired,  onclick: proptypes.func,  type: proptypes.oneof(['button', 'submit', 'reset']),  classname: proptypes.string,  disabled: proptypes.bool,};export default button;

这里，button 组件有额外的属性，如 classname 和disabled，使其更加灵活，能够适应不同的用例。

3. 对更复杂的组件使用组合

组合允许您通过组合更简单的组件来构建复杂的组件。这种方法遵循 react 将 ui 分解为可管理的小块的理念。

示例：卡片组件

import react from 'react';import proptypes from 'prop-types';import './card.css';const card = ({ title, content, footer }) =&gt; (  <div classname="card">    <div classname="card-header">{title}</div>    <div classname="card-body">{content}</div>    <div classname="card-footer">{footer}</div>  </div>);card.proptypes = {  title: proptypes.node.isrequired,  content: proptypes.node.isrequired,  footer: proptypes.node,};export default card;

在此示例中，card 组件由 title、content 和 footer props 组成，允许您传递任何 react 元素来创建自定义卡片布局。

4. 利用孩子获得更大的灵活性

children 属性允许您将组件和元素作为子级传递，从而为可重用组件的使用方式提供更大的灵活性。

示例：模态组件

import react from 'react';import proptypes from 'prop-types';import './modal.css';const modal = ({ isopen, onclose, children }) =&gt; {  if (!isopen) return null;  return (    <div classname="modal">      <div classname="modal-content">        <button classname="modal-close" onclick="{onclose}">x</button>        {children}      </div>    </div>  );};modal.proptypes = {  isopen: proptypes.bool.isrequired,  onclose: proptypes.func.isrequired,  children: proptypes.node,};export default modal;

模态组件使用 children 属性来渲染传递给它的任何内容，使其成为一个高度灵活且可重用的用于显示模态对话框的组件。

5.有效地设计组件的样式

设计可重用组件的样式可能具有挑战性，但是使用 css-in-js 库（例如 styled-components 或 emotion）可以帮助以模块化方式管理样式。

示例：样式按钮组件

import React from 'react';import styled from 'styled-components';const StyledButton = styled.button`  background-color: ${(props) =&gt; (props.primary ? 'blue' : 'gray')};  color: white;  padding: 10px 20px;  border: none;  border-radius: 4px;  cursor: pointer;  &amp;:hover {    background-color: ${(props) =&gt; (props.primary ? 'darkblue' : 'darkgray')};  }`;const Button = ({ label, primary, onClick }) =&gt; (  <styledbutton primary="{primary}" onclick="{onClick}">    {label}  </styledbutton>);export default Button;

在此示例中，styledbutton 组件使用 styled-components 来应用基于主要 prop 的条件样式，从而提供了一种干净且模块化的样式设置方法。

结论

在 react 中构建可重用组件是创建可维护、一致且高效的应用程序的强大方法。通过从简单的组件开始，使它们可配置，利用组合和子组件，并使用有效的样式技术，您可以创建一个可重用组件库，这将节省您在开发过程中的时间和精力。此外，使用 storybook 等工具记录您的组件可确保它们易于其他人理解和使用。

快乐编码！

文章推荐

在 React 中构建可重用组件

为什么要构建可重用组件？

1. 从简单的组件开始

2. 使组件可配置

3. 对更复杂的组件使用组合

4. 利用孩子获得更大的灵活性

5.有效地设计组件的样式

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？