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

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

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

从“/path/to/file.js”导入图书数据

Answer 2

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

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

<Component books={booksData} />

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

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>
         )})}
    </>
)}

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

How can I import my objects file in react

javascript

reactjs