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

Question

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

我正在使用 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>

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

提前致谢。

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>
      );
}