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

Question

此数据位于其自己的 .js 文件中我希望能够在我的整个应用程序中使用它我该怎么做？

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

我尝试将它导入我的 App.js 并将其作为 Prop 传递

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) =>

但我不明白如果我将它作为 prop 传递下去，为什么它没有定义。

Answer 1

您应该在您的 js 文件中导出 posts，以便在其他文件中导入:

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