如何将反应事件处理程序移动到单独的文件，导出然后导入以在多个不同的功能组件中重用？

Question

我有一个 React 功能组件，它打印一个在单击按钮时递增或递减的计数器编号。下面是我的函数

我正在使用反应版本：^16.13.1

export default function  Counter(){
    const [count, setCount] = useState(0);

    const increment = () => {
        //more logic here ..
        setCount(count + 1);
    }
    const decrement = () => {
        //more logic here ..
        setCount(count !== 0 ? count - 1 : 0);
    }
    return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => increment()}>Increment SO</button>
          <button onClick={() => decrement()}>Decrement SO</button>
        </div>
      );
} 

我想分离事件处理程序逻辑，包括将状态设置到单独的文件中并将其导出..如下所示

import React, { useState } from 'react';

const Increment = () => {
    //more logic here ..
    setCount(count + 1);
}
const Decrement = () => {
    //more logic here ..
    setCount(count !== 0 ? count - 1 : 0);
}


export default { Increment, Decrement };

我想在 Counter 函数中使用这些导出函数，如下所示

import CounterHelper from './CounterHelper';
<button onClick={() => CounterHelper.Increment()}>Increment SO</button>

我在运行这个程序时遇到了几个错误，所以我确信我在这里遗漏了一些基本的东西。有人可以告诉我这是否可能吗？是否有任何替代选项可以仅使用功能组件和反应钩子来实现上述目标。

提前致谢。

Answer 1

只需传递变量引用即可。

CounterHelper.js

export const Increment = (count, setCount) => {
    //more logic here ..
    setCount(count + 1);
};

export const Decrement = (count, setCount) => {
    //more logic here ..
    setCount(count !== 0 ? count - 1 : 0);
};

计数器.js

import React, { useState } from 'react';
import { Increment, Decrement } from './CounterHelper';
export default function  Counter(){
    const [count, setCount] = useState(0);

    return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => Increment(count, setCount )}>Increment SO</button>
          <button onClick={() => Decrement(count, setCount)}>Decrement SO</button>
        </div>
      );
} 

更新：

使用自定义挂钩。

useCounterState.js

export default function useCounterState() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count !== 0 ? count - 1 : 0);
  };

  return {count, increment, decrement}
}

计数器.js

import React, { useState } from 'react';
import useCounterState from './useCounterState';
export default function  Counter(){
    const { count, increment, decrement } = useCounterState();

    return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => increment()}>Increment SO</button>
          <button onClick={() => decrement()}>Decrement SO</button>
        </div>
      );
}