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

Question

我一直在尝试进行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!!')
      });

    }

  })

Answer 1

您的组件名称必须以大写字母开头，因为以小写字母开头的组件会被搜索为默认DOM元素，例如div, p, span etc。对于您的statisticsPage组件，情况并非如此。将其设置为大写即可。

根据文档：

当元素类型以lowercase字母开头时，它指的是诸如或的内置组件，并导致将字符串'div' 或“
span”传递给React.createElement。以大写字母开头的类型，例如，<Foo />编译React.createElement(Foo)并对应于JavaScript文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果确实有一个以lowercase字母开头的组件，请在JSX中使用它之前将其分配给大写变量。

const View = () => (

    <div>

     <h1>Reports</h1>

   <StatisticsPage />

    </div>

);







var StatisticsPage = React.createClass({

  getInitialState: function() {

     return {info: "loading ... "};

  },

  componentDidMount: function() {

     this.requestStatistics();

  },

  render: function() {

    return (

        <div>info: {this.state.info}</div>

    );

  },

  requestStatistics:function(){

        console.log('here');

        this.setState({info:1})

        console.log('works!!')





    }



  })



ReactDOM.render(<View/>, document.getElementById('app'));


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>



<div id="app"></div>