用于禁用字段的React hoc

import React from 'react';

const withDisableField = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      const { disabled, ...restProps } = this.props;
      const disabledProps = disabled ? { disabled: true } : {};

      return <WrappedComponent {...restProps} {...disabledProps} />;
    }
  };
};

// 原始组件
const MyForm = ({ disabled }) => {
  return (
    <form>
      <input type="text" placeholder="Username" />
      <input type="password" placeholder="Password" />
      <button type="submit" disabled={disabled}>Submit</button>
    </form>
  );
};

// 使用hoc包装原始组件
const DisabledForm = withDisableField(MyForm);

// 应用中使用包装后的组件
const App = () => {
  return <DisabledForm disabled={true} />;
};

export default App;