Question

我正在为我的项目使用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}
    />
  );
};

对于此组件，我完全通过了seven个道具。但是，某些道具，例如name，type和fullWidth，更像是config。我的问题是我应该直接传递这些道具，还是应该将这三个道具包裹在others道具中？

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

这可能会使其他开发人员更灵活地使用此组件吗？

Answer 1

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}
    />
  );
};

还可以使用PropTypes进行更好的类型检查。使用rest方法，您无需将道具传递给他人。您必须像这样简单地使用它

<DeliInput name='something' fullWidth />

以此类推。

如何设计可恢复的React组件

1 个答案: