リアクション - ユーザ定義の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要素として検索されているので、あなたは、コンポーネント名は大文字で始める必要があります。あなたのstatisticsPageコンポーネントではそうではありません。それを大文字にして、うまく動作します。

によればdocs：

要素タイプはlowercase文字で始まる、それが指す 内蔵様成分、または、文字列の結果は'div' または「スパン」React.createElementに渡されます。 大文字で始まるタイプは、React.createElement(Foo)および にコンパイルされ、ファイルで定義またはインポートされたコンポーネントに対応します。

大文字のコンポーネントに名前を付けることをお勧めします。 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>