如何在反應中導入我的對象文件

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