javascript - ReactJS prop 绑定(bind)是如何工作的？

Question

下面的值 ( <ArticleList instance>.props.articles ) 绑定(bind)到 HomePage 的 prop (this.props.articles)。

this.props.articles的对象标识可能是undefined或者它可能会改变，因此 ReactJS 必须将“this.props.articles”维护为配置而不是对象引用，从而允许动态查找。

这是正确的吗？

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 表达式。

但这不可能是由于问题中所述的原因(您将绑定(bind)未定义)。

那么这是 JSX 知道如何解析的特殊 JSX 语法吗？

Answer 1

为什么说 this.props.articles 不是 JavaScript？

你的代码一旦被 Babel 转译就会变成:

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 属性的引用。