React - ユーザー定義のJSXコンポーネントがレンダリングされない

React - User-Defined JSX Components Not rendering


質問 written by Shubham Khatri @2018-01-22 06:13:37Z

: 3 : 1 : 752

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

    }

  })
回答 1 written by Shubham Khatri @2018-01-26 10:46:05Z
6

小文字で始まるものはdiv, p, span etcデフォルトのDOM要素として検索されるため、コンポーネント名は大文字で始める必要があります。 statisticsPageコンポーネントには当てはまりません。 大文字にするとうまくいきます。

ドキュメントによると:

要素型がlowercase始まっている場合、それはまたはのような組み込みコンポーネントを参照し、結果としてReact.createElement渡される文字列'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>