Как я могу передать файл JavaScript с объектом в реагирующий компонент

Question

У меня есть файл с объектом 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;

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

Я не уверен, что вы можете сделать что-то вроде этого:

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

Я бы попробовал так или иначе:

export default { ... };

или

export const data = { ... }

Другое дело, вы используете props, который должен быть передан в качестве аргумента render, не так ли preact вещь?Также React выдаст предупреждение, если вы попытаетесь визуализировать объект.Измените рендер на что-то вроде:

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

Answer 2

Редактировать: я не видел, что есть экспорт по умолчанию.Тогда, это должно работать, просто экспортировать его снова не нужно.Просто используйте один метод экспорта.И последнее: не визуализируйте объект непосредственно как дочерний элемент React.

---

Попробуйте импортировать такие данные:

import { data } from './data';

Если вы опускаете фигурныефигурные скобки означает, что вы импортируете экспорт по умолчанию из файла данных с именем data.Но у вас нет экспорта по умолчанию, поэтому вы должны использовать фигурные скобки.