如何将带有对象的javascript文件传递到react组件

我有一个带有javascript对象的文件，我想将它传递给我的主App.js，然后通过我拥有的测试组件发送它。我试过几种不同的方法，但我似乎无法让它正常工作。我要么得到一个错误，要么得到一个未定义的错误。我让它工作的唯一方法是，如果我忽略data.js文件，将代码放在我的App.js中的渲染函数下面，但我知道有更好的方法，我只是不知道怎么做

App.js：

import React, { Component } from 'react';
import Test from './Components/Test'
import data from './data'
import './App.css';

class App extends Component {
render() {

return (
   <div className="App">

    <Test data={data}/>
   </div>
  );
 }
}

export default App;

---

编辑：我没有看到有默认的导出。然后，它必须工作，只是再次导出它是不必要的。只需使用一种导出方法。最后一件事，不要直接将对象渲染为React子对象

---

尝试这样导入数据：

从“/data”导入{data}

---

如果省略大括号，则表示您正在从名为

data

的数据文件导入默认导出。但是，您没有默认的导出，因此必须使用大括号

我不确定你是否可以这样做：

export const data = {
  ...
}
export default data;

我会尝试这样或那样的方式：

export default { ... };

或

另一件事，您使用的是

道具

，它应该作为参数传递给

渲染

，是不是

预执行

的事情？此外，如果尝试渲染对象，React将抛出警告。将“渲染”更改为类似以下内容：

<div>
   <h3>{this.props.data.customerName}</h3>
</div>

{this.props.data.customerName}

有一个默认的export哦，我没有看到。谢谢@charlietfl，我编辑了我的答案（因为它现在什么都不回答：）。所以在我的Test.js中，我放了

这个.props.data.id

，然后它像我想的那样出现了。有较短的路吗？还是我应该使用解构？用更短的方式做什么？整个对象本身对于前端是无用的。您需要提取相关数据并渲染它，或者在我认为的其他地方使用。请尝试从

export const

中删除

export

。在底部有一个默认的导出语句

export default { ... };

export const data = { ... }

<div>
   <h3>{this.props.data.customerName}</h3>
</div>