Javascript 如何设计可恢复的反应组件

我正在为我的项目使用React。首先，我需要设计一个可恢复的

Input

组件。这是我的密码：

import React from "react";
import TextField from "@material-ui/core/TextField";
const Input = ({
  name,
  value,
  label,
  errorMessage,
  type,
  onChange,
  fullWidth
}) => {
  return (
    <TextField
      name={name}
      value={value}
      label={label}
      helperText={<span style={{ color: "red" }}>{errorMessage}</span>}
      type={type}
      onChange={onChange}
      margin="normal"
      fullWidth={fullWidth}
    />
  );
};

它可以让其他开发人员更灵活地使用这个组件吗

const DeliInput = ({
  value,
  label,
  errorMessage,
  onChange,
  ...rest
}) => {
  return (
    <TextField
      value={value}
      label={label}
      helperText={<span style={{ color: "red" }}>{errorMessage}</span>}
      onChange={onChange}
      margin="normal"
      {...rest}
    />
  );
};

---

依此类推。

+1，我还将从

DeliInput

道具中删除

value

、

label

和

onChange

，因为您只是将它们传递到

TextField

中，而不做任何修改。此组件需要的唯一道具是

errorMessage

非常感谢您的回答！我认为这是一种更好的组件设计方法。但我的经理说，最好是升级这三个道具并直接传递它们。他说要为这个组件添加

jsDoc

，这将使其他开发人员更容易使用，因为他们不需要查找

materialui

TextField

文档。

const DeliInput = ({
  value,
  label,
  errorMessage,
  onChange,
  ...rest
}) => {
  return (
    <TextField
      value={value}
      label={label}
      helperText={<span style={{ color: "red" }}>{errorMessage}</span>}
      onChange={onChange}
      margin="normal"
      {...rest}
    />
  );
};

<DeliInput name='something' fullWidth />