下面的值 ( <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 语法吗?
最佳答案
为什么说 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
属性的引用。
关于javascript - ReactJS prop 绑定(bind)是如何工作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45209867/