如何从js文件中导入数据以在组件中使用

Question

此数据在其 own.js 文件中我希望能够在我的应用程序中使用它我该怎么做？

   const posts = [{
          username: "lenard",
          avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg",
        }]

我尝试将它导入我的 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>
    );
  }
}

当我尝试在我的 Posts.js 组件中使用帖子（数据）时，当我尝试通过它进行映射时出现错误 posts is not defined

{posts.map((item) =>

但我不明白为什么如果我把它作为道具传递下去它没有定义。

Answer 1

您应该导出 js 文件中的posts ，以便将其import其他文件：

export const posts = [{
      username: "lenard",
      avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg",
}]

然后你可以使用

import {posts} from './data/posts';

这是一个工作示例：
https://www.webpackbin.com/bins/-KtsA8KTKvwxTUo2qlW8

如果要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;

并定期导入：

import posts from './data/posts';

https://www.webpackbin.com/bins/-Kts8LJQBS4I1pprHiSo

Answer 2

导入默认导出：如果我们导出类似导出默认的内容。 使用以下语法导入。

import GIVEN_NAME from ADDRESS

导入命名值：一个模块可以有多个导出。 如果我们的 js 喜欢这样，我们可以使用下面的语法来导入。

import { PARA_NAME } from ADDRESS

类似地，对于多个这样的导入，我们可以使用逗号将大括号内的两个参数名称分开。

导入默认导出和命名值的组合：

import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

导出语法：-

export default GIVEN_NAME
export { PARA_NAME }

转到下面的网站，它有一个很好的解释。 https://www.geeksforgeeks.org/reactjs-importing-exporting/

Answer 3

你只是忘了使用大括号：

import {posts} from './data/posts';

但是如果你不想使用花括号，你只需要在导出帖子时使用 (export default) ：

const posts = [{
  username: "test",
  avi: "test"
}];
export default posts;

然后你可以使用这个：

import posts from './data/posts';

导入帖子时。

Answer 4

您导入的数据必须存储在唯一变量中。

所以将您的posts={posts}更改为post={posts}

像这样导入

import posts from './data/posts';

<Posts post={posts}/>

Answer 5

我只想在这里补充一点，如果您要从 Javascript 文件导出多个数据集，则必须这样做：

export { articles, otherArticles };

然后在您将使用数据的文件中：

import { articles, otherArticles } from "./yourDataFile"