Javascript Articles网格Article.props在哪里？或者如何参考道具？

在ArticlesGrid示例中，我们有以下渲染函数：

render () {    
  return this.state.articles && (
     <div className='articles'>
       { this.state.articles.map( function (article) {
         return <Article article={article} key={article.id} />;
       })}
     </div>
  );
}

为什么不是呢

var Article = function(this.props.article) {

?

事实上，当我尝试console.log this.props时，我没有定义。我认为这篇文章也是一个组成部分

更新：以下是完整的代码：

class ArticlesGrid extends React.Component {
 constructor(props) {
  super(props);
  this.state = { 
     articles: []
  };
}

componentDidMount () {

  var url =
     'http://api.nytimes.com/svc/search/v2/articlesearch.json?'
      + 'api-key=d68154fxxxxxxxxxxxxxxxxc7f5';

   $.getJSON(url, function(data, status) {
      return this.setState({articles: this.parse(data)});
   }.bind(this));       
}

parse(results) {      
  if(!results || !results.response) return [];      
  var articles = results.response.docs;

  var parsedArticles = [];
  for (var i = 0; i < articles.length;i++){
     var article = articles[i];
     if (article.multimedia.find(this.isXL)) {

        parsedArticles.push({
           id: article._id,
           title: article.headline.main || 'Untitled',
           imageURL: article.multimedia.find(this.isXL).url || '#',
           webURL: article.web_url || '#'
        });
     }
  }     

  return parsedArticles;
}

isXL (image) {
  return image.subtype === 'xlarge';
}

render () {


  return this.state.articles && (
     <div className='articles'>
       { this.state.articles.map( function (article) {
         return <Article article={article} key={article.id} />;
       })}
     </div>
  );
}
}


var Article = function({article}) {
  var imgURL = 'https://static01.nyt.com/' + article.imageURL;

  return (
     <div className='article'>
        <a className='article-link' href={article.webURL}>
           <img className='article-image'
                title={article.title}
                src={imgURL} />
        </a>
     </div>
  );
}


ReactDOM.render(<ArticlesGrid/>,document.getElementById('container'));

class ArticlesGrid扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
条款：[]
};
}
组件安装（）{
变量url=
'http://api.nytimes.com/svc/search/v2/articlesearch.json?'
+“api密钥=D68154FXxxxxxxxxxxxxxC7F5”；
$.getJSON（url、函数（数据、状态）{
返回this.setState（{articles:this.parse（data）}）；
}.约束（这个）；
}
解析（结果）{
如果（！results | |！results.response）返回[]；
var articles=results.response.docs；
var parsedArticles=[]；
对于（var i=0；i

当我尝试console.log this.props时，我没有定义 文章也是一个组成部分

是的，

Article

也是一个组件，但它是一个。

props

作为参数传递给此函数。因此，如果您想记录此组件的props，则可以按照以下方法进行操作

var Article = function(props) {
  console.log(props)
  var imgURL = 'https://static01.nyt.com/' + article.imageURL;

什么是var Article=函数（{Article}）{

这就是调用。这意味着，如果一个对象被传递给这个函数，那么获取该对象的

article

属性。所以基本上

var Article=函数（{Article}）{

大致意思是

var Article = function(props) {
   var article = props.article
   ...

---

这些函数在哪里被调用？你能为整个组件发布代码吗？

var Article = function(props) {
   var article = props.article
   ...