如何从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并将其作为道具传递下去

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.map((item) =>

但是我不明白为什么如果我把它作为道具传下去的话它没有定义.

Answer 1

你应该posts在你的js文件中导出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您需要创建consts然后将其导出:

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