Question

ChartProvider正在生成符合配置文件的图表列表。我试图在MainComponent中渲染所有图表。

我收到错误：“对象作为React子句无效（找到：带有键{}的对象）。如果要渲染子集合，请使用数组或使用createFragment包装对象来自React附加组件的（对象）。“

MainComponent：

var React = require('React');
var Chart = require('ChartProvider');

var MainComponent = React.createClass({    
    render: function () {
        return (
           <div>
              {Chart}
           </div>
         );
     }
 });

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文件包含数据：

module.exports = {
        wList : [ {
          title : "Average(Kbps)",
        }, {
          title : "Average DL(Kbps)",
        }, {
          title : "DL",
        }, 
        {
          title : "Minutes",         
        }, {
          title : "Cell",        
        }, {
          title : "UL",      
        }] 
      };

Answer 1

您通过module.exports从模块导出，而不是module.export：

module.exports = item;

在您的代码中，module.exports是一个空对象，无法呈现并导致您看到的错误消息。

与此无关，您不会关闭<ChartComponent>。在末尾添加/以解决此问题：

<ChartComponent width="500px" height="400px" options={{title: widget.title}} />

获取错误 - 对象作为React子对象无效

1 个答案: