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

Question

我有一个带有javascript对象的文件，我想将其传递到主App.js，然后通过我拥有的测试组件将其发送。 我尝试了几种不同的方法，但是我似乎无法使其正常工作。 我得到一个错误或未定义。 我使它起作用的唯一方法是，如果我不理会data.js文件，并将该代码放在App.js中的render函数下，但是我知道有更好的方法，我只是不知道怎么样。

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;

Test.js：

import React, { Component } from 'react';

class Test extends Component {
render(props) {
console.log(props)
return (
  <div>

    <h3>{props.data}</h3>
  </div>
  );
}
}

export default Test;

data.js：

  export const data = {
  "id": 173,
  "deviceId": "1011000000000002",
  "imei": "352588070009004",
  "smsGate": "16466652134",
  "registerDate": "2018-03-12 22:14:21",
  "activationDate": "2018-03-12T22:26:52.439Z",
  "number": "15202459297",
  "wakeUpCyclesLeft": -27,
  "lastWakeUpTime": "2018-03-22T20:27:52.565Z",
  "nextWakeUpTime": "2018-03-22T20:30:00.000Z",
  "customerName": "ABCD",
  "isActive": true,
  "responseTimeout": 60,
  "location": [
 {
 "time": "2018-03-21T17:00:39.000Z",
  "point": {
  "lng": -115.13,
   "lat": 36.1132
 },
 "address": null,
"thirdPartyPoint": {
 "lng": -115.13,
"lat": 36.1132
 },
"localPoint": null,
"gpsPoint": null
}

],
"soil_sensor": 20,
"tip_sensor": false,
"water_level": 74
}

export default data;

Answer 1

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

---

尝试像这样导入数据：

import { data } from './data' ;

如果省略花括号，则表示您正在从名为data数据文件中导入默认导出。 但是，您没有默认导出，因此必须使用花括号。

Answer 2

我不确定您是否可以执行以下操作：

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

我会尝试一种或另一种方式：

export default { ... };

要么

export const data = { ... }

另一件事，您使用props ，应作为参数传递render ，是不是preact的事情吗？ 另外，如果您尝试渲染对象，React也会发出警告。 将渲染更改为：

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