ReactJSプロップバインディングはどのように機能しますか？

Question

以下の値（<ArticleList instance>.props.articles）は、HomePage（this.props.articles）の小道に結合されています。

ReactJSは、動的ルックアップを許可する代わりに、オブジェクト参照の設定として「this.props.articles」を維持しなければならないので、this.props.articlesのオブジェクトIDは、undefinedかもしれませんか、それは変更される場合があります。

これは間違いありませんか？

class HomePage extends React.PureComponent { 
    render() { 
    return <ArticleList articles={this.props.articles} /> 
    } 
} 

function ArticleList({articles}) { 
    if(!articles) return <div>There are no articles!</div>; 
    return <div>{ articles.map(a => <Article value={a} />) }</div>; 
} 

編集：私はundefinedのためのケースをカバーするために、コードを編集しました。私の質問は残っています。修正再表示するには

：

this.props.articlesは、プロパティの値を取得するために、JavaScript式のように見えます。

しかし、それは質問に記載された理由ではありません（あなたは定義されていません）。

これは、代わりにJSXが解析する方法を知っている特殊なJSX構文ですか？

Answer 1

なぜthis.props.articlesはJavaScriptではないと言っていますか？かつてバベルでtranspiled

あなたのコードは次のようになります。

class HomePage extends React.PureComponent { 
    render() { 
    return React.createElement(ArticleList, { 
     articles: this.props.articles, 
    }); 
    } 
} 

function ArticleList({articles}) { 
    if(!articles) { 
    return React.createElement('div', {}, 'There are no articles!'); 
    } 
    return React.createElement('div', {}, 
    articles.map(a => <Article value={a} />) 
); 
} 

this.props.articlesは単にHomePageクラスのpropsプロパティへの参照です。