Question

我使用react 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等......）

Answer 2

如果您使用的是create-react-app，则json-loader已包含在内。在这种情况下，您可以使用以下语句加载json文件。

var config = require('./barChartConfig.json');

反应导入json数据

2 个答案: