Reagieren – Benutzerdefinierte JSX-Komponenten werden nicht gerendert

Ich habe versucht, einen AJAX-Aufruf zu tätigen und ihn dann meiner Ansicht hinzuzufügen, nachdem er abgerufen wurde.

Mit dem aktuellen Code passiert eigentlich nichts.

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!!')
      });

    }

  })

Ihr Komponentenname muss mit einem Großbuchstaben beginnen, da solche, die mit Kleinbuchstaben beginnen, als Standard-DOM-Elemente wie gesucht werden div, p, span etc. Was bei dir nicht der Fall ist statisticsPage Komponente. Machen Sie es groß und es funktioniert gut.

Laut der Dokumente:

Wenn ein Elementtyp mit a beginnt lowercase Buchstabe, es bezieht sich auf eine eingebaute Komponente wie oder und ergibt eine Zeichenfolge 'div'
oder ‘span’ übergeben React.createElement. Typen, die mit einem Großbuchstaben wie beginnen <Foo /> kompilieren zu React.createElement(Foo) und einer Komponente entsprechen, die in Ihrem definiert oder importiert wurde JavaScript Datei.

Wir empfehlen Komponenten mit Großbuchstaben zu benennen. Wenn Sie eine Komponente haben, die mit a beginnt lowercase Buchstabe, weisen Sie ihn einer großgeschriebenen Variablen zu, bevor Sie ihn in JSX verwenden.

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>