我正在尝试在React中导入D3v4以生成Dash组件。到目前为止,这是我的代码:
protected void button_Click(object sender, EventArgs e)
{
try
{
int cnt = 0;
DataTable dt = new DataTable();
dt.Columns.Add("Certificate ID");
dt.Columns.Add("Part Number");
dt.Columns.Add("Part Description");
foreach (GridViewRow row in gvPRCertInfo.Rows)
{
if ((row.Cells[0].FindControl("chkCert") as CheckBox).Checked)
{
DataRow dr = dt.NewRow();
dr["Certificate ID"] = row.Cells[1].Text;
dr["Part Number"] = row.Cells[2].Text;
dr["Part Description"] = row.Cells[3].Text;
dt.Rows.Add(dr);
cnt++;
}
}
if (cnt <= 0)
{
DataRow dr = dt.NewRow();
dr["Certificate ID"] = gvPRCertInfo.SelectedRow.Cells[1].Text;
dr["Part Number"] = gvPRCertInfo.SelectedRow.Cells[2].Text;
dr["Part Description"] = gvPRCertInfo.SelectedRow.Cells[3].Text;
dt.Rows.Add(dr);
}
Session["Details"] = dt;
Response.Redirect("url");
}
catch (Exception ex)
{
}
}
但是当我尝试使用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
};
预先发布Dash时,它会抛出错误:
$ npm run prepublish
它指向error Unexpected namespace import import/no-namespace
我正在构建Plotly提供的关于编写自己的组件的示例。
答案 0 :(得分:1)
如esling Docs中所述:
报告是否使用了名称空间导入。
所以你应该改成它:
import d3 from 'd3';
如果必须使用命名空间(如eslint docs中所述)
,请禁用该规则 <强>更新强>
阅读docs of d3后,他们使用相同的模式,因此我假设default
没有d3
导出,因此:
import d3 from 'd3';
可能无效 然后对这样的个人部分使用命名导入:
import {scaleLinear} from "d3-scale";
或者禁用我上面提到的规则。