[英]Getting error - Objects are not valid as a React child
ChartProvider is generating list of charts acc to config file. ChartProvider正在生成配置文件对应的图表列表。 I am trying to render all charts in MainComponent.
我正在尝试在MainComponent中呈现所有图表。
I am getting error: "Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons." 我收到错误消息: “对象作为React子对象无效(找到:带键{}的对象)。如果要渲染子对象的集合,请使用数组来代替,或者使用React中的createFragment(object)包装对象附加组件。”
MainComponent: 主要成分:
var React = require('React');
var Chart = require('ChartProvider');
var MainComponent = React.createClass({
render: function () {
return (
<div>
{Chart}
</div>
);
}
});
ChartProvider.js ChartProvider.js
var item = config.wList.map(function(widget, index) {
return (
<ChartComponent width="500px" height="400px"
options={{title: widget.title}} />
);
});
module.exports = item ;
Config.js file contains data: Config.js文件包含数据:
module.exports = {
wList : [ {
title : "Average(Kbps)",
}, {
title : "Average DL(Kbps)",
}, {
title : "DL",
},
{
title : "Minutes",
}, {
title : "Cell",
}, {
title : "UL",
}]
};
You export from a module via module.exports
, not module.export
: 您是通过
module.exports
而不是module.export
从模块导出的:
module.exports = item;
In your code, module.exports
is an empty object, which cannot be rendered and leads to the error message you are seeing. 在您的代码中,
module.exports
是一个空对象,无法呈现,并导致您看到错误消息。
Unrelated to that, you don't close your <ChartComponent>
. 与此无关,您无需关闭
<ChartComponent>
。 Add a /
to the end to fix this: 在末尾添加
/
以解决此问题:
<ChartComponent width="500px" height="400px" options={{title: widget.title}} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.