在react中将常量转换为自己的文件

这可能是一个noob反应问题(仍在学习(，我有这个常数：

const data = {
first_name:   "John",
last_name:    "smith",
employee:     "Google"  
};

我传递给另一个函数。这是可行的，但我想把它移到自己的文件中，使它更通用。如果我将其移动到person-data.js:

import React, { useEffect } from "react";
const PersonData = props => {
const data = {
first_name:   "John",
last_name:    "smith",
employee:     "Google" 
};
return (
{data}
);
};
export default PersonData;

在我的主要组成部分：

import person from '../person-data'
.....
// temp to test
const data = {
first_name:   "John",
last_name:    "smith",
employee:     "Google"  
};
.....
somefunction(person) // doesnt work
somefunction(data)   // works

它不再有效，我想移动它的原因是这样我就可以使用道具动态传递信息。这是一个好方法吗？

它不起作用，因为您使用析构函数语法返回对象，而没有将data对象扩展到新对象中。

尝试：

const PersonData = props => {
const data = {
first_name:   "John",
last_name:    "smith",
employee:     "Google" 
};
return {...data} // or just: return data
};
export default PersonData;

import person from '../person-data'
.....
// temp to test
const data = {
first_name:   "John",
last_name:    "smith",
employee:     "Google"  
};
.....
somefunction(person())

按照上面代码中的方式，您将返回一个形式为的对象

{
data: {
first_name: 'John',
last_name: 'smith',
...
}
}

因此，例如，您必须查找PersonData(props).data.first_name才能获得您的名字。

const personData = {
first_name: "John",
last_name: "smith",
employee: "Google" 
};
export default personData;

您可以导出常量。它不需要在组件中。如果你想更改这些值，你可以创建一个函数。例如

function getPersonData(firstName) {
return {
first_name: firstName,
last_name: "smith",
employee: "Google" 
};
}

如果我理解你的意思，你要做的就是创建一个包含以下内容的文件personData.js：

const personData = {
first_name: "John",
last_name: "Smith",
employee: "Google"  
};
export default personData;

然后在需要的地方导入以前的文件

import personData from './personData.js';

您可以在需要的地方访问personData.first_name、personData.last_name和personData.employe。

您需要从那里export这个文件，并在组件中import。

CODESANDBOX工作演示：https://codesandbox.io/s/upbeat-cookies-hdeiw?file=/src/PersonData.js

person-data.js文件：

const data = {
first_name:   "John",
last_name:    "smith",
employee:     "Google"  
};
export default data;

现在在你的组件导入它。

import React, { useState, useEffect } from "react";
import personData from "./person-data.js"; // Provide your relative path
const PersonData = (props) => {
const [data, setData] = useState(personData);
return (
<>
<div>
<p>{data.first_name}</p>
<p>{data.last_name}</p>
<p>{data.employee}</p>
</div>
</>
);
};
export default PersonData;

相关内容

最新更新

热门标签：