将值从反应组件传递到常量文件答案

【问题标题】：Passing values from react components to constants file将值从反应组件传递到常量文件
【发布时间】：2021-12-27 11:02:56
【问题描述】：

我已将所有静态文本移至常量文件，并将用户的名字和姓氏传递给一个特定的键。我试过使用字符串文字，但它不起作用。有什么方法可以将反应中的值传递给常量文件。

constants.js

export constants={
'employeeName': `Hello welcome ${employee.firstname}, ${employee.lastname}`
}

反应组件

import constants from './constants.js'

const employee={
firstname:props.firstname,
lastname: props.lasname
}

<div>{constants.employeeName}</div>

【问题讨论】：

导出 const 员工？
constants.js 中的员工在哪里？而你在导出后忘记了 const
员工来自反应组件，不在此常量中......这就是我的问题:)

标签： javascript reactjs

【解决方案1】：

如果您坚持在单独的文件中使用字符串常量并在另一个组件中使用和格式化它，您可以使用来自this post 或一些字符串格式库（如hydrate-text）的解析方法，如下所示：

constants.js

export const constants = {
  employeeName: `Hello welcome %s, %s`,
};

util.js;

export function parse(str) {
  var args = [].slice.call(arguments, 1),
    i = 0;

  return str.replace(/%s/g, () => args[i++]);
}

组件：

import { parse } from "util";
import constants from "./constants.js";

const Employee = () => {
  const employee = {
    firstname: props.firstname,
    lastname: props.lasname,
  };

  return (
    <div>
      {parse(
        constants.employeeName,
        employee.firstname,
        employee.lastname
      )}
    </div>
  );
};

在我看来，这不是一种干净且高效的方式，您可以只使用一个函数并将员工传递给它，就像其他答案一样：

【讨论】：

【解决方案2】：

您可以创建一个方法并在其上传递一个参数。

例子：

    const getFullName = (employee) => {
     return {
       'employeeName': `Hello welcome ${employee.firstname}, ${employee.lastname}`
     }
    };
    
    const employee = {
     firstname: "asif",
     lastname: "vora"
    };
    
    const { employeeName } = getFullName(employee);

    console.log(employeeName);

【讨论】：

【解决方案3】：

常量.js：

export const constants= { employeeName: 'Hello welcome'}

反应组件：

import constants from './constants.js'

const employee={firstname:props.firstname,lastname: props.lasname}

<div>{`${constants.employeeName} ${employee.firstname}, ${employee.firstname}`}</div>

【讨论】：