reactjs - React 导入 json 数据

Question

我使用 react vega 绘制图表。当我为图表编写配置时，它可以工作。我想从外部文件 barChartConfig.json获取 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 请求来获取它。（获取，axios 等...）

Answer 2

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

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