如何將帶有對象的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>