React import json data

Question

Я рисую график, используя реакцию vega. Когда я пишу конфигурацию для графика, он работает. Я хотел бы получить конфигурации в формате JSON из внешнего файла barChartConfig.json

я пытаюсь импортировать этот файл, но не работал. Мой вопрос в том, как я могу импортировать json и назначить его переменной?

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

При использовании этого: import config from './barChartConfig.json'; это означает, что вы «просят» ваш пакетирования (Webpack?), Чтобы включить данные этого файла, когда он создает файл bundle.js.
Конечно, вам понадобится соответствующий загрузчик, например json-loader.
Если вы пытаетесь получить эти данные во время выполнения, вам нужно будет получить его через запрос ajax. (fetch, axios и т. д.)