C3和React DOMException
我正在尝试使用C3在我的React项目中呈现一个图表。
问题所在
我所做的是动态生成一个id (UUID)，并将它附加到图表组件中的div。然后在组件在componentDidMount中呈现后调用一些代码。这是一个常见的模式，我在其他项目中见过。
起初，一切似乎都很好。但是，在反复刷新页面后，有时图表生成不起作用。我得到的错误是：
DOMException: Failed to execute 'querySelector' on 'Document': '#a-really-long-id' is not a valid selector.我试过的
我试着在附加图表时使用setTimeout来延迟，但奇怪的是，即使在延迟10秒之后，我仍然得到了相同的结果。这让我相信，这不是种族状况，而是由其他原因造成的。也许C3只读取DOM一次而不响应更改？但这并不能解释为什么它有时会起作用..。
即使试图从控制台中选择by元素，也没有起作用。
代码
以下是我的完整组件代码：
// assets/js/index.jsx
import React from 'react';
import uuid from 'uuid/v4';
import c3 from 'c3';
class Chart extends React.Component {
constructor(props) {
super(props);
this.id = uuid();
this._update = this._update.bind(this);
}
_update() {
const data = this.props.data;
this.chart = c3.generate({
bindto: `#${this.id}`,
data: {
columns: [
['Male', 0],
['Female', 0],
['Brand', 0]
],
type: 'bar',
colors: {
Male: '#0066CC',
Female: '#FF6666',
Brand: '#808080'
},
groups: [
['Male', 'Female', 'Brand']
],
order: null
},
bar: {
width: {
ratio: 0.3
}
},
transition: {
duration: 500
},
tooltip: {
show: false
},
axis: {
x: { show: false },
y: { show: false },
},
size: { width: 220, height: 320 },
grid: {
x: { show: false }
},
legend: {
show: false
}
});
setTimeout(function() {
this.chart.load({
columns: [
['Male', data.male],
['Female', data.female],
['Brand', data.brand]
]
});
}, 500);
}
componentDidMount() {
this._update();
}
render() {
return (
<div id={this.id} className="chart"></div>
);
}
}
export default Chart;回答 1
Stack Overflow用户
发布于 2019-03-05 05:26:29
这可以作为一个评论添加，但由于它很大，添加它作为一个答案。
您使用html5 4/html5语义吗？
根据HTML4 (https://www.w3.org/TR/html401/types.html)
ID和名称标记必须以字母(A)开头，后面可以是任意数量的字母、数字(0-9)、连字符("-")、下划线("_")、冒号(":")和句点(“”)。
根据HTML5 (https://www.w3.org/TR/html5/dom.html)
当在HTML元素上指定时，id属性值在元素树中的所有id中必须是唯一的，并且必须至少包含一个字符。该值不得包含任何空格字符。
您的uuid有时可能生成有效的Id，有时可能不会(不确定uuid是如何工作的)
如果不使用HTML5语义，则可以简单地添加<!DOCTYPE html>
在html文档的顶部并试一试。
另外，
您在逻辑中使用了settimeout，并在其中使用了this.Chart。
this，现在将引用settimeout而不是类。
你能试着换衣服吗？
setTimeout(function() {
this.chart.load({
columns: [
['Male', data.male],
['Female', data.female],
['Brand', data.brand]
]
});
}, 500);至
setTimeout( () => {
this.chart.load({
columns: [
['Male', data.male],
['Female', data.female],
['Brand', data.brand]
]
});
}, 500);https://stackoverflow.com/questions/54995717
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号