Question

在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({article}) {

为什么不是

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'));

Answer 1

当我尝试console.log this.props我得到了未定义。我想文章也是一个组成部分。

是Article也是一个组件，但它是functional component。 props将此作为参数传递给此函数。因此，如果您想记录此组件的道具，那么您可以按照

的方式进行操作

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

什么是var Article = function（{article}）{

这称为object destructuring。这意味着如果将对象传递给此函数，则获取该对象的article属性。所以基本上

var Article = function({article}) {

大致意味着

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

ArticlesGrid哪里有Article.props？或者如何引用道具？

1 个答案: