React 封装自定义组件的操作方法

import React, { InputHTMLAttributes } from 'react';
import './CustomInput.scss';
const CustomInput: React.FC<
  InputHTMLAttributes<HTMLInputElement> & {
    label: string | number; // 这里的意思label属性可以是一个字符串也可以是一个数字。
    viewMode?: 'view' | 'edit'; // 这里的意思是view属性只能是view或者edit字符串
  }
> = ({ label, viewMode = 'edit', ...props }) => {
  // view = 'edit' 表示默认值就是edit
  if (viewMode === 'edit') {
    return (
      <>
        <div className={'ts-custom-input edit'}>
          <span>{label}：</span>
          <input {...props} />
        </div>
      </>
    );
  }
  return (
    <>
      <div className={'ts-custom-input view'}>
        <span className={'title'}>{label}：</span>
        <span className={'content'}>{props.defaultValue}</span>
      </div>
    </>
  );
};
export default CustomInput;

.ts-custom-input {
  width: 100%;
  height: 26px;
  line-height: 26px;
  &.view {
    .title {
      color: black;
    }
    .content {
      color: #696767;
    }
  }
}

import React from 'react';
import CustomInput from './components/CustomInput';
function App() {
  return (
    <div className="App">
      <CustomInput
        label="姓名"
        placeholder="请输入值"
        viewMode={'edit'}
        defaultValue={'我是默认值'}
        onChange={(e) => {
          console.log('👉👉👉-----------------输入值发生了变化，现在是：', e.target.value);
        }}
      />
      <CustomInput label="姓名" viewMode={'view'} defaultValue={'我是默认值'} />
    </div>
  );
}
export default App;