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

您应该在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，你需要创建一个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

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

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

因此将您的posts={posts}更改为post={posts}

这样导入

import posts from './data/posts';

<Posts post={posts}/>

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

3 个答案: