Reagieren Import JSON Daten

Question

Ich zeichne ein Diagramm mit Hilfe von Reaktion Vega. Wenn ich config für das Diagramm schreibe, funktioniert es. Ich möchte Config im JSON-Format aus einer externen Datei barChartConfig.json

Ich versuche zu bekommen, diese Datei zu importieren, aber hat nicht funktioniert. Meine Frage ist, wie kann ich ein JSON importieren und es in eine Variable zuweisen?

import config from './barChartConfig.json'; 

const barSpec = config; 
const Vega = ReactVega.default; 

class App extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      spec: barSpec 
      // ,data: barData 
     }; 
    } 

    render() { 
     return (
      <div> 

       <Vega spec={this.state.spec} /> 

      </div> 
     ); 
    } 
} 

const app = document.getElementById('app'); 

ReactDOM.render(<App />, app); 

Answer 1

Wenn Sie dies: import config from './barChartConfig.json'; es bedeutet, dass Sie „zu fragen:“ Ihr Bündler (webpack?) Werden die Daten dieser Datei enthalten sein, wenn es die Datei bundle.js erstellt.
Natürlich benötigen Sie dafür einen passenden Lader wie json-loader.
Wenn Sie versuchen, diese Daten zur Laufzeit zu bekommen, dann müssen Sie es über Ajax Anfrage erhalten. (Fetch, Axios etc ...)