如何在ReactJS中包含自定义JavaScript？

如何在ReactJS中包含自定义JavaScript并在其中使用对象数组？ 我正在尝试显示歌曲列表。因此，我创建了一个名为songList.js的文件，在该文件中，我创建了一个对象数组，如何将其包含在我的list.js文件中并在其中使用

songList.js代码：-

const songList = [{
        name: "All We Know",
        artist: "The Chainsmokers ft. Phoebe Ryan",
        album: "All We Know",
    },
    {
        name: "Alone",
        artist: "Alan Walker",
        album: "Different World",
    },
    {
        name: "Be Kind",
        artist: "Marshmello & Halsey",
        album: "Be Kind",
    },
    {
        name: "Beach House",
        artist: "The Chainsmokers",
        album: "Sick Boy",
    },
];

我试图这样做，但它不工作，请告诉我哪里我错了

list.js代码

import React, { Component } from 'react'
import './songList.js'

export class list extends Component {
    render() {
        return (
            <div>
                {songList[0].name}
            </div>
        )
    }
}

export default list

import React，{Component}来自“React”
导入“./songList.js”
导出类列表扩展组件{
render（）{
返回(
{歌曲列表[0]。名称}
)
}
}
导出默认列表

首先导出对象，然后正确导入：

export const songList = ...

import { songList } from './songList.js';

您需要导出列表（使用

export default songList

），然后使用

import songList from./songList.js'