如何将React中的const函数组件改写为带Props的组件？

嘿，其实你现在的renderFieldOne已经是一个接收Props的函数组件啦！不过我猜你是想让它的Props定义更清晰、更规范，方便后续维护和排查问题对吧？那我给你几种实用的改写方式，按需选择就行：

方式一：JavaScript + PropTypes（适合普通JS项目，增加Props校验） #

先把紧凑的代码格式化得更易读，再用prop-types库给每个Props加上类型校验，这样别人用组件时传错参数，React会在控制台给出明确警告：

import PropTypes from 'prop-types';

const renderFieldOne = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <div className="group">
      <input className="text" {...input} type={type} />
      <label>{label}</label>
      <span className="highlight"></span>
      <span className="bar"></span>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
);

// 定义Props的校验规则
renderFieldOne.propTypes = {
  input: PropTypes.object.isRequired, // input是必填对象（通常来自Formik这类表单库）
  label: PropTypes.string.isRequired, // 输入框标签必填
  type: PropTypes.string.isRequired, // 输入框类型必填（比如text/email）
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.string,
    warning: PropTypes.string
  }).isRequired // meta是必填的状态对象
};

方式二：TypeScript 类型接口（推荐，类型安全） #

如果你的项目用TypeScript，直接定义Props接口来约束结构，开发时编辑器会实时提示错误，从根源避免传参失误：

// 先定义Props的完整结构
interface FieldOneProps {
  input: {
    name: string;
    value?: string;
    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
    // 这里可以根据你实际用的input对象补充属性
  };
  label: string;
  type: string;
  meta: {
    touched?: boolean;
    error?: string;
    warning?: string;
  };
}

// 组件接收符合接口的Props
const renderFieldOne = ({ input, label, type, meta: { touched, error, warning } }: FieldOneProps) => (
  <div>
    <div className="group">
      <input className="text" {...input} type={type} />
      <label>{label}</label>
      <span className="highlight"></span>
      <span className="bar"></span>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
);

export default renderFieldOne;

方式三：拆分解构，提升可读性（适合新手或快速迭代） #

如果暂时不需要类型校验，只是想让Props的来源更直观，可以把解构拆分到组件内部，逻辑一目了然：

const renderFieldOne = (props) => {
  // 从传入的props中解构出需要的属性
  const { input, label, type, meta } = props;
  const { touched, error, warning } = meta;

  return (
    <div>
      <div className="group">
        <input className="text" {...input} type={type} />
        <label>{label}</label>
        <span className="highlight"></span>
        <span className="bar"></span>
        {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    </div>
  );
};

核心思路就是明确组件接收的Props结构，不管哪种方式，都能让组件的使用和维护更顺畅。

内容的提问来源于stack exchange，提问作者Piotr Żak