[英]how to import data in react from a js file to use in components
This data is in its own.js file I want to be able to use it all over my app how can I?此数据在其 own.js 文件中我希望能够在我的应用程序中使用它我该怎么做?
const posts = [{
username: "lenard",
avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg",
}]
I tried importing it into my App.js and passing it down as a prop我尝试将它导入我的 App.js 并将其作为道具传递
import posts from './data/posts'; //the js file with the data
import Posts from './components/Posts/Posts'; // the component I want to use it in
class App extends Component {
render() {
return (
<div className="App">
<Navigation />
<Posts posts={posts}/>
</div>
);
}
}
When I try to use posts (data) in my Posts.js component I get the error posts is not defined when I try to map through it当我尝试在我的 Posts.js 组件中使用帖子(数据)时,当我尝试通过它进行映射时出现错误 posts is not defined
{posts.map((item) =>
but I do not understand why its not defined if I passed it down as a prop.但我不明白为什么如果我把它作为道具传递下去它没有定义。
You should export the posts
in your js file in order to import
it in other files:您应该导出 js 文件中的
posts
,以便将其import
其他文件:
export const posts = [{
username: "lenard",
avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg",
}]
Then you can use然后你可以使用
import {posts} from './data/posts';
Here is a working example:这是一个工作示例:
https://www.webpackbin.com/bins/-KtsA8KTKvwxTUo2qlW8 https://www.webpackbin.com/bins/-KtsA8KTKvwxTUo2qlW8
If you want to export default
you will need to create the consts and then export it:如果要
export default
,则需要创建常量,然后将其导出:
const posts = [{
username: "lenard",
avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg"
}];
export default posts;
And import it regularly:并定期导入:
import posts from './data/posts';
https://www.webpackbin.com/bins/-Kts8LJQBS4I1pprHiSo https://www.webpackbin.com/bins/-Kts8LJQBS4I1pprHiSo
Importing default export: If we export something as like export default.导入默认导出:如果我们导出类似导出默认的内容。 Use below syntax to import.
使用以下语法导入。
import GIVEN_NAME from ADDRESS
Importing named values: One module can have number of exports.导入命名值:一个模块可以有多个导出。 If our js like that we can use below syntax to import.
如果我们的 js 喜欢这样,我们可以使用下面的语法来导入。
import { PARA_NAME } from ADDRESS
And similarly for multiple such imports we can use a comma to seperate two parameter name within the curly braces.类似地,对于多个这样的导入,我们可以使用逗号将大括号内的两个参数名称分开。
Importing a combination of Default Exports and Named Values:导入默认导出和命名值的组合:
import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS
Exporting syntaxes:-导出语法:-
export default GIVEN_NAME
export { PARA_NAME }
Go to below site it has a good explanation.转到下面的网站,它有一个很好的解释。 https://www.geeksforgeeks.org/reactjs-importing-exporting/
https://www.geeksforgeeks.org/reactjs-importing-exporting/
you just forgot to use curly brackets:你只是忘了使用大括号:
import {posts} from './data/posts';
But if you don't want to use curly brackets, you just need to use (export default) when exporting the posts:但是如果你不想使用花括号,你只需要在导出帖子时使用 (export default) :
const posts = [{
username: "test",
avi: "test"
}];
export default posts;
Then you can use this:然后你可以使用这个:
import posts from './data/posts';
when importing the posts.导入帖子时。
Your imported data must be stored in a unique variable.您导入的数据必须存储在唯一变量中。
so change your posts={posts}
to post={posts}
所以将您的
posts={posts}
更改为post={posts}
Import like this像这样导入
import posts from './data/posts';
<Posts post={posts}/>
I just want to add here that if you are exporting multiple datasets from a Javascript file, you have to do this:我只想在这里补充一点,如果您要从 Javascript 文件导出多个数据集,则必须这样做:
export { articles, otherArticles };
Then in the file where you will consume the data:然后在您将使用数据的文件中:
import { articles, otherArticles } from "./yourDataFile"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.