以形式证明可重复使用的反应组件

React应用的基石是组件。几乎不可能构建一个React应用而不用到组件。组件的广泛应用甚至导致一些第三方包提供可用于集成功能的组件。

这些第三方组件通常是可重用的。它们与您应用中可能已有的组件之间的区别在于特异性。

我的意思是：假设您经营一家销售Polo衫的公司，您可以这样做：

1. 生产已经印有图案的Polo衫，或者
2. 让买家选择他们想要的图案。

一些基本要素会保持一致，例如所有Polo衫都应该是短袖的。但用户可以选择衬衫的不同款式，例如颜色和尺寸。在这种情况下，短袖Polo衫就是一个很好的React组件：它是一个具有不同变化的相同商品。

现在假设您正在开发一个登录表单。与Polo衫一样，表单具有一致的特征，但我们关注的不是尺寸和颜色变化，而是输入字段、提交按钮，甚至可能是忘记密码链接。这可以组件化并实现输入、按钮、链接等的各种变化。

输入元素示例

让我们从为表单创建输入字段的角度来看。典型的文本输入在React组件中如下所示：

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    };
  }

  handleChange = (event) => {
    this.setState({ username: event.target.value });
  };

  render() {
    return (
      

为了使此输入元素可在其他地方和项目中重用，我们必须将其提取到其自己的组件中。让我们将其命名为FormInput。

import React from 'react';
import PropTypes from 'prop-types';

const FormInput = ({
  name,
  type,
  placeholder,
  onChange,
  className,
  value,
  error,
  children,
  label,
  ...props
}) => {

  return (
    <div>
      <label htmlfor="{name}">{label}</label>
      <input type="{type}" name="{name}" placeholder="{placeholder}" onchange="{onChange}" classname="{className}" value="{value}">
      {error && <p>{error}</p>}
    </div>
  );
};

FormInput.defaultProps = {
  type: "text",
  className: ""
};

FormInput.propTypes = {
  name: PropTypes.string.isRequired,
  type: PropTypes.oneOf(['text', 'number', 'password']),
  placeholder: PropTypes.string.isRequired,
  className: PropTypes.string,
  value: PropTypes.any,
  onChange: PropTypes.func.isRequired,
  label: PropTypes.string.isRequired // Added required label prop
};

export default FormInput;

该组件接受某些props，例如我们需要使用有效标记创建输入所需的属性，包括占位符、值和名称。我们在render函数中设置输入元素，并将属性值设置为传递给组件的props。我们甚至将输入绑定到标签以确保它们始终在一起。您可以看到我们没有通过预定义任何内容来做出假设。我们的目标是确保该组件可以在尽可能多的场景中使用。

这构成了一个很好的组件，因为它强制执行良好的标记（Brad Frost 称之为“dumb React”），这表明并非每个组件都必须是某种高度复杂的功能。话虽如此，如果我们谈论的是一些非常基本的东西，比如静态标题，那么使用React组件可能就有点矫枉过正了。将某些东西制作为可重用组件的可能标准可能是当您需要在应用程序的其他部分使用相同的功能时。如果该组件只使用一次，则通常不需要“可重用”组件。

我们可以在另一个组件LoginPage中使用我们的输入组件。

import React, { Component } from 'react';
import FormInput from './FormInput'; // Import FormInput component

class LoginPage extends Component {
  state = {
    user: {
      username: "",
      password: ""
    },
    errors: {},
    submitted: false
  };

  handleChange = event => {
    const { user } = this.state;
    user[event.target.name] = event.target.value;
    this.setState({ user });
  };

  onSubmit = (event) => {
    event.preventDefault(); // Prevent default form submission
    const { user } = this.state;
    let errors = {};

    if (!user.username) {
      errors.username = "Enter your username!";
    }

    if (user.password.length 
        {submitted ? (
          <p>Welcome onboard, {user.username}!</p>
        ) : (
          <div>
            <h3>Login!</h3>
            <forminput name="username" label="Username" placeholder="Enter your username" value="{user.username}" onchange="{this.handleChange}" error="{errors.username}"></forminput>
            <forminput name="password" type="password" label="Password" placeholder="Enter your password" value="{user.password}" onchange="{this.handleChange}" error="{errors.password}"></forminput>
            <button type="submit">Login</button>
          </div>
        )}
      
    );
  }
}

export default LoginPage;

看到LoginPage如何两次使用FormInput了吗？我们同时将其用作用户名和密码的文本输入。如果我们想更改输入的功能，我们可以在我们创建的FormInput组件文件中进行这些更改，并且这些更改将应用于使用输入组件的每个实例。这就是拥有可重用组件的基本优势：您不必重复自己。

甚至错误也是从FormInput组件显示的。

onSubmit函数首先验证我们从表单中获得的用户对象，确保它符合用户名有值的结构。请注意，我们甚至可以扩展输入的功能，就像我们所做的那样，检查密码是否包含至少八个字符。

如果您查看代码，您会看到其中有一个Button组件。这与HTML元素不同，而是一个其他组件，它采用定义我们想要的按钮类型（提交、重置、按钮）、其类名、单击时要执行的操作以及标签的props。我们可以集成许多其他按钮属性来强制执行所需的任何标准。

const Button = ({ type, className, onClick, label, ...props }) => (
  <button type="{type}" classname="{className}" onclick="{onClick}">
    {label}
  </button>
);

export default Button;

这是将所有组件组合在一起后的最终登录表单。

想自己试试吗？尝试使用可重用的<input>元素。如果这太难，您可以从<input>元素开始，然后可能是一个复选框，然后再跳到<select></select>。关键思想是使其通用。我很想看看您的成果，所以请在评论区链接您的作品！

以上是以形式证明可重复使用的反应组件的详细内容。更多信息请关注PHP中文网其他相关文章！