Javascript React-用户定义的JSX组件不呈现

我一直在尝试进行AJAX调用，然后在检索到视图后将其添加到视图中

当前代码实际上没有发生任何变化

const View = () => (
    <div>
     <h1>Reports</h1>
   <statisticsPage />
    </div>
);
export default View;


var statisticsPage = React.createClass({
  getInitialState: function() {
     return {info: "loading ... "};
  },
  componentDidMount: function() {
     this.requestStatistics(1);
  },
  render: function() {
    return (
        <div>info: {this.state.info}</div>
    );
  },
  requestStatistics:function(){
      axios.get('api/2/statistics')
      .then(res => {
        values = res['data']
        this.setState({info:1})
        console.log('works!!')
      });

    }

  })

const View=（）=>(
报告
);
导出默认视图；
var statisticsPage=React.createClass({
getInitialState:函数（）{
返回{info:“正在加载…”}；
},
componentDidMount:function（）{
这是统计数字（1）；
},
render:function（）{
返回(
信息：{this.state.info}
);
},
requestStatistics:函数（）{
axios.get（'api/2/statistics'）
。然后（res=>{
值=res['data']
this.setState（{info:1}）
console.log（'works！！'）
});
}
})

组件名称必须以大写字母开头，因为以小写字母开头的名称将作为默认DOM元素进行搜索，如

div、p、span等

。您的

统计信息页面
组件的情况并非如此。把它写成大写就行了

根据报告：

当元素类型以
小写字母开头时，它指的是
内置组件，如or和，生成字符串
'div'
或传递给
React.createElement
的“span”。以
大写字母，如
编译为
React.createElement（Foo）
和
对应于在
JavaScript
文件中定义或导入的组件

我们建议使用大写字母命名组件。如果你有
以小写字母开头的组件，将其分配给
在JSX中使用前，先将变量大写


const View=（）=>(
报告
);
var StatisticsPage=React.createClass({
getInitialState:函数（）{
返回{info:“正在加载…”}；
},
componentDidMount:function（）{
这个.requestStatistics（）；
},
render:function（）{
返回(
信息：{this.state.info}
);
},
requestStatistics:函数（）{
console.log（'here'）；
this.setState（{info:1}）
console.log（'works！！'）
}
})
ReactDOM.render（，document.getElementById（'app'））