在React Redux应用程序中,我的状态如下:

state = {
    items: [
        { id: 1, first_name: "John", last_name: "Smith", country: "us" },
        { id: 2, first_name: "Jinping", last_name: "Xi", country: "cn" },
    ]
}

我使用React组件渲染它.

现在我需要一个函数,可以给我一个人的"全名".因此,这不仅仅是"姓氏+姓氏",而是取决于国家(例如,在中国是"姓氏+姓氏"),因此有一些相对复杂的逻辑,我想将其封装在一个可以从任何React组件使用的函数中.

在OOP中,我会创建一个Person::getFullName()方法来提供这些信息.然而,state对象是一个"哑"对象,其中子对象没有任何专门的方法.

那么,在React Redux中,一般推荐的管理方法是什么?我所能想到的就是创建一个全局函数,比如user_getFullName(user),它将接受一个用户并返回全名,但这不是很优雅.有什么建议吗?

推荐答案

在我的应用程序中,我遵循为此类 case 创建库的方法,到目前为止,这对我来说非常有效.

在这种情况下,我会 Select create a new module,例如{ComponentRoot}/lib/user.js,根据具体情况导出函数getFullName(user)getFullName(firstName, lastName, country).

现在只需要importing the module where you require the functionality个,不需要全球功能:

import React from 'react'
import {getFullName} from '../lib/user'

const Title = ({user}) =>
    <div>
        {getFullName(user)}
    </div>

我们将我们的库文件夹放在与components文件夹等相同的级别上,但任何对您最有效的都应该这样做.

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时,它在严格模式下触发两次

从另一个组件更改组件中const的状态

下拉Tailwind CSS菜单与怪异beviour

禁止直接访问Next.js中的页面,同时允许从应用程序内部访问

如何使我的代码可以接受我想要的每一个链接

为什么React UseEffect挂钩在页面重新加载时运行

在react上隐藏源映射

React js拖放图像并预览

UseEffect 似乎不适用于页面的首次渲染

如何隐藏移动导航栏后面的向下滚动图标和文本?

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理?

无法设置 null 的属性(设置src)

使用 map 循环浏览列表列表中的列表并显示它们

臭名昭著的测试未包含在 act(...) 中

React Three Fiber mesh 标签在此浏览器中无法识别

如何将我的 ID 值传递给下一个组件?

Cypress ,重试不再附加到 DOM 的元素

如何实现两个 SVG 形状相互叠加的 XOR 操作?

如何将本地视频文件上传到 Google Cloud

由于另一个子组件,如何在react 中渲染另一个子组件