遇到错误-对象作为React子对象无效

Question

ChartProvider正在生成配置文件对应的图表列表。 我正在尝试在MainComponent中呈现所有图表。

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

主要成分：

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}} />