ReactJS：使用连接值连接地图输出

Question

在我的 ReactJS 应用程序中，我将手机号码作为字符串获取，我需要将其拆分并生成一个链接，以便它们可以在移动设备上点击。但是，我得到的是[object Object], [object Object] 作为输出，而它应该是xxxxx, xxxxx, ...。

另外，我需要将这个 mobileNumbers 函数移动到一个单独的位置，可以通过多个组件访问它。
例如：目前此代码位于 Footer组件，Contact Us 组件也需要此代码。

...
function isEmpty(value) {
    return ((value === undefined) || (value === null))
        ? ''
        : value;
};

function mobileNumbers(value) {
    const returning = [];

    if(isEmpty(value))
    {
        var data = value.split(',');

        data.map((number, index) => {
            var trimed = number.trim();

            returning.push(<NavLink to={`tel:${trimed}`} key={index}>{trimed}</NavLink>);
        });

        return returning.join(', ');
    }

    return '';
};
...

1. 我在这里做错了什么？
2. 有什么方法可以创建一个单独的文件，以便在需要时访问这些常用常量/函数？

Answer 1

第一个问题：

我在这里做错了什么？

由于Array.prototype.join()，您所遇到的问题正在发生。如果在一天结束时创建一个字符串。来自文档：

join() 方法通过连接数组（或类似数组的对象）中的所有元素创建并返回一个新字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一项，则将不使用分隔符返回该项。

想一想：

const navLinks = [{link:'randomlink'}, {link:'randomlink2'}];
console.log(navLinks.join(','))

如果您想使用, 的连接，那么您可以这样做：

function mobileNumbers(value) {
    if(isEmpty(value)) {
        const data = value.split(',');

        return data.map((number, index) => {
            const trimed = number.trim();
            return <NavLink to={`tel:${trimed}`} key={index}>{trimed}</NavLink>;
        }).reduce((prev, curr) => [prev, ', ', curr]);
    }

    return [];
};

那么你需要在 JSX 中使用map() 来使其工作。

第二个问题：

有什么方法可以创建一个单独的文件，以便在需要时访问这样的公共常量/函数？

通常我对常量所做的事情是在src 文件夹中创建一个名为Consts.js 的文件，并按以下方式放在那里：

export default {
    AppLogo: 'assets/logo_large.jpg',
    AppTitle: 'Some app name',
    RunFunction: function() { console.log(`I'm running`) }
}

然后在需要某些东西时在组件中简单地import：

import Consts from './Consts';

并以render 为例：

return <>
   <h1>{Consts.AppTitle}</h1>
</>

同样你也可以调用函数。

+1 建议：

Array.prototype.map() 返回一个数组，因此您不需要像之前那样创建一个数组。来自文档：

map() 方法创建一个新数组，其中填充了在调用数组中的每个元素上调用提供的函数的结果。

我希望这会有所帮助！