React：如何让这个 React 组件写得更好更高效？

Question

React：如何让这个 React 组件写得更好更高效？我觉得我在重复 onIncrement 中的代码，它可以重构得更好。 maxValue 道具是可选的

ButtonStepper.tsx:

// TypeScript Type: Props
interface IProps {
  onChange: (value: number) => void;
  minValue?: number;
  maxValue?: number;
  stepValue?: number;
}

// Component: Button (Stepper)
const ButtonStepper = ({ onChange, minValue, maxValue, stepValue }: IProps): JSX.Element => {
  // React Hooks: State
  const [value, setValue] = useState<number>(0);

  // React Hooks: Lifecycle Methods
  useEffect(() => {
    onChange(value);
  }, [onChange, value]);

  // On Increment
  const onIncrement = (): void => {
    if (maxValue && maxValue <= value) {
      if (stepValue) {
        setValue((prevState) => prevState + stepValue);
      }
      else {
        setValue((prevState) => prevState + 1);
      }
    }
    else {
      if (stepValue) {
        setValue((prevState) => prevState + stepValue);
      }
      else {
        setValue((prevState) => prevState + 1);
      }
    }
  };

Answer 1

确保在你的道具解构中添加默认值。

// Component: Button (Stepper)
const ButtonStepper = ({ onChange, minValue, maxValue = Number.MAX_VALUE, stepValue = 1 }: IProps): JSX.Element => {
  // React Hooks: State
  const [value, setValue] = useState<number>(0);

  // React Hooks: Lifecycle Methods
  useEffect(() => {
    onChange(value);
  }, [onChange, value]);

  // On Increment
  const onIncrement = (): void => {
    if (maxValue > value + stepValue) {
       setValue(value + stepValue);
    }
  };

React：如何让这个 React 组件写得更好更高效？

React: How can I make this React Component written better to be more efficient?

components

typescript

reactjs

react-native