在遵循Reaction中的最佳实践时,跨组件共享功能的最佳方式是什么?我现在有一个简单的例子是一个日期格式化程序,它只获取一个日期时间,并将其转换为一个静态(目前)格式为YYY-MM-DD的字符串

我的代码 struct 如下:

1. mainComponent.tsx 
  a. tableOne.tsx
  b. tableTwo.tsx
  c. timeline.tsx

每个.tsx文件都有一个对应的useState.到目前为止,我的 idea 是这样的.我应该:

  1. 将该函数直接添加到mainComponent.tsx,并将该函数传递给需要它的相关组件
  2. 有一个专门针对日期ForMatter的useState,需要它的函数可以根据需要拉入(请注意,我以前遇到过错误,如果我更新函数和函数都在父组件和子组件中,子组件将不会以正确的状态重新呈现)
  3. 在mainComponent.tsx级别上有另一个特定于日期Formatter.tsx的文件,并让组件将其用作全局静态函数.

也许我错过了另一个 Select ?但到目前为止,我已经做了很多1&3.

谢谢!

推荐答案

也许我错过了另一个 Select ?但到目前为止,我已经做了很多1&3.

按照1st选项,您将得到circular dependency,因为您必须导入child组件,并且您必须从child组件导入来自parent的函数.However如果它是关于作为props 传递的,它仍然是有问题的,因为如果你不想要任何过度的重新渲染,你将不得不记住它.

就我个人而言,我会 Select 3rd,但前提是你要使用MainComponent中提到的功能.如果您决定在其他地方也使用它,最好在主根目录中创建一个单独的目录,例如utilsdateUtils.ts个文件来存储与Date相关的所有助手函数.

Typescript相关问答推荐

如何使用属性作为具有Generics的TypScript类中的类型守护?

我应该使用什么类型的React表单onsubmit事件?

不推荐使用Marker类-Google map API警告

使用TypeScrip根据(可选)属性推断结果类型

从子类构造函数推断父类泛型类型

具有自引用属性的接口

使用TypeScrip5强制使用方法参数类型的实验方法修饰符

在VSCode中显示eslint错误,但在终端中运行eslint命令时不显示?(Vite,React,TypeScript)

判断映射类型内的键值的条件类型

如何将类似数组的对象(字符串::匹配结果)转换为类型脚本中的数组?

17个Angular 的延迟观察.如何在模板中转义@符号?

VITEST警告:当前的测试运行器不支持After Each/teardown挂钩

在打字应用程序中使用Zod和Reaction-Hook-Forms时显示中断打字时出错

如何在Reaction Native中关注屏幕时正确更新状态变量?

任何导航器都未处理有效负载为";params";:{";roomId";:";...";}}的导航操作

如何在TypeScrip中使用数组作为字符串的封闭列表?

如何填写Partial的一些属性并让类型系统知道它?

换行TypeScript';s具有泛型类型的推断数据类型

如何在TypeScript中将元组与泛型一起使用?

React router - 如何处理嵌套路由?