如何在反应中导入我的对象文件

Question

我有一个 .js 文件，其中我的书如下：

export const booksData = [
{
    id: "1",
    title: "1491",
    description: "A fantastic historical book",
    genre: 'Historical',
    image: "https://shop.radical-guide.com/wp-content/uploads/2020/06/1491-Front.jpg"
},

如何在我的 react 应用程序中动态导入和显示这些书籍？

Answer 1

import { booksData } from "path/to/file.js"

你真的不需要将它作为道具传递。 仅当您使用的是组件时，才可以，例如：

<Component books={booksData} />

然后，在 Component 函数中将其作为道具传递。

function Component(props){
    return (
     <>
         {
           props.books.map(book => {
            return(
           <h1>{book.title}</h1>
         )})}
    </>
)}

如果没有，您可以直接导入该对象的组件（不推荐）

import { booksData } from "path/to/file.js"

简单地说：

function Component(){

    return (
     <>
         {
           booksData.map(book => {
            return(
           <h1>{book.title}</h1>
         )})}
    </>
)}

Answer 2

// 首先你需要像这样导入你的 .js 文件

从'/path/to/file.js'导入booksData