@tc-utils/shared

安装

使用 npm:

$ npm i -g npm
$ npm i @tc-utils/shared

使用方法

直接引用 import { withNativeProps } from '@tc-utils/shared'

import React, { useState } from 'react'
import { Input } from './Input'
import styles from './index.module.less'
import ReactDOM from 'react-dom'

const App = () => {
  const [state, setState] = useState<string>()

  return (
    <div className={styles.demo}>
      <div>withNativeProps简单示例</div>
      <div>
        <Input
          onChange={(val) => {
            setState(val)
          }}
          value={state}
          className={styles['demo-input']}
        />
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Input组件

import { withNativeProps } from '@tc-utils/shared'
import React, { CSSProperties } from 'react'
import styles from './index.module.less'

interface InputProps {
  value?: string
  onChange?: (newVal: string) => void
  className?: string
  style?: CSSProperties
}
export const Input = (props: InputProps) => {
  return withNativeProps(
    props,
    <input
      className={styles['input']}
      onChange={(e) => {
        props.onChange?.(e.target.value)
      }}
      value={props.value}
    />
  )
}

index.module.less

.demo {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  font-size: 20px;

  &-input {
    color: red;
  }
}

.input {
  margin-right: 10px;
  padding: 4px;
  font-size: 20px;
}