如何为React函数式组件绑定方法？求替代不推荐方案的正确做法

在类组件中我们可以直接定义静态方法，但直接给函数式组件挂载属性的写法并不推荐，下面是几种更规范的实现方案：

1. 抽离独立工具函数（推荐） #

如果这些方法不需要依赖组件内部的状态或props，完全可以将它们抽离成独立的工具函数，和组件放在同一文件或单独的工具文件中：

// 独立工具函数
const customFunction1 = () => {
  return 'whatever';
};

const customFunction2 = () => {
  return 'whatever';
};

// 函数式组件
const Block = () => {
  return <Component />;
};

export { Block, customFunction1, customFunction2 };

使用时按需导入调用即可，这种方式完全符合函数式编程理念，避免了组件与工具方法的耦合，结构也更清晰。

2. 用Object.assign关联组件与方法 #

如果一定要将方法和组件对象绑定在一起，可以使用Object.assign来创建组件并挂载静态方法，比直接赋值的写法更严谨：

const Block = Object.assign(() => {
  return <Component />;
}, {
  customFunction1: () => {
    return 'whatever';
  },
  customFunction2: () => {
    return 'whatever';
  }
});

export default Block;

定义完成后，既可以正常渲染<Block />组件，也能通过Block.customFunction1()调用对应的方法。

3. 模块导出多成员 #

通过模块同时导出组件和方法，使用时按需导入，也能达到类组件静态方法的使用效果：

const Block = () => {
  return <Component />;
};

const customFunction1 = () => {
  return 'whatever';
};

const customFunction2 = () => {
  return 'whatever';
};

export default Block;
export { customFunction1, customFunction2 };

这种方式不会污染组件本身的对象结构，同时保持了组件与方法的关联性。

内容的提问来源于stack exchange，提问作者Dhaval Jardosh