意外的命名空间导入 import/no-namespace

Question

我正在尝试在 React 中导入 D3v4 以生成 Dash 组件。到目前为止，这是我的代码：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import * as d3 from 'd3';

function createBox(divId) {
    var svgContainer = d3.select(divId).append('svg')
                                     .attr('width', 200)
                                     .attr('height', 200);

 //Draw the Circle
   svgContainer.append('circle')
                        .attr('cx', 30)
                        .attr('cy', 30)
                        .attr('r', 20);
}

/**
 * ExampleComponent is an example component.
 * It takes a property, `label`, and
 * displays it.
 * It renders an input with the property `value`
 * which is editable by the user.
 */
export default class ExampleComponent extends Component {
    constructor() {
        super();
        this.plot = this.plot.bind(this);
    }
    plot(props) {
       createBox(props.id);
    }

    componentDidMount() {
        this.plot(this.props);
    }

    componentWillReceiveProps(newProps) {
        this.plot(newProps);
    }

    render() {
        const {id} = this.props;
        return (
            <div id={id}/>
        );
    }
}

ExampleComponent.propTypes = {
    /**
     * The ID used to identify this compnent in Dash callbacks
     */
    id: PropTypes.string

};

但是当我尝试使用 $ npm run prepublish 预发布 Dash 时，它会抛出错误：

error Unexpected namespace import  import/no-namespace

它指向 import * as d3 from 'd3';

我正在根据 Plotly 提供的示例编写您自己的组件。

Answer 1

如esling Docs所述：

Reports if namespace import is used.

所以你应该把它改成这样：

import d3 from 'd3';

如果您必须使用命名空间（如 eslint 文档中所述），或者禁用该规则

更新
阅读 docs of d3 后，他们使用相同的模式，所以我假设 d3 没有 default 导出，因此：

import d3 from 'd3';

可能行不通。
然后对像这样的个人部分使用命名导入：

import {scaleLinear} from "d3-scale";

或者像我上面提到的那样禁用规则。

意外的命名空间导入 import/no-namespace

Unexpected namespace import import/no-namespace

d3.js

reactjs

plotly

plotly-dash