Question

我有一个包含很少元素的对象列表，单个元素看起来像：

{
    'id': '5d4647dsa54d6s4ad65as',
    'date': '2016-06-09T15:03:12.000Z',
    'title': 'Istvan 5',
    'text': 'Pathos, betrayal, "The Galaxy will be Burning!", ',
    'coments': [
        {
            'id': 'qwerty',
            'user': 'Gu1iman',
            'text': 'The Code of Adeptus Astartes does not approve of     this'
        },
        {
            'id': 'asdfg',
            'user': 'Feru5 Manu5',
            'text': 'I lost my had for love!'
        },
        {
            'id': 'zxcvb',
            'user': 'Fu1grim Fenix',
            'text': 'I know bro, I know'
        },
    ]
},

我可以显示文本：

export default class ArticleList extends PureComponent
  {
   state = {
       openArticleId: null
   }
   render(){
       const articleElements = this.props.articles.map((articles,    index)     =>
           <li key={articles.id} className='article-list__li' onClick=              
  {this.handelClick.bind(this, articles.id)}>
               <Article article = {articles}
                        isOpen = {this.state.openArticleId ===    articles.id}
                        onButtonClick = {this.handelClick.bind(this, articles.id)}/>
           </li>
       )
       return (
           <ul>
               {articleElements}
           </ul>
       )
   }
   handelClick = openArticleId => this.setState({
       openArticleId: this.state.openArticleId === openArticleId ?    null : openArticleId
   })
}

但是我不介意如何显示此文本的“评论”。我该如何显示？我尝试编写嵌入式循环，但是无法正常工作。

Answer 1

<Article article = {articles}-使用您已经传递的数据：

this.props.article.comments.map(

<Article />的内部渲染。结果将在<li />标记内呈现。当然，您只能使用isOpen属性为“打开”的文章提供评论：

(!!this.props.isOpen && this.props.article.comments.map(

反应嵌入式周期

1 个答案: