ReactJS - インポートされたコンポーネントに配列を渡す

Question

コンポーネントを外部ファイルにモジュール化してインデックスファイルにインポートしようとしていますが、インポートされたコンポーネントに配列を渡す際にエラーが発生しています。モジュール化されたコンポーネントでこの配列を処理しているようには見えません。インデックスファイル内のインポートや外部ファイルのコンポーネントロジックに問題があるのか​​どうか疑問に思っています。誰かが私を正しい方向に向けることができますか？

index.js：

import React from 'react'; 
import fetch from 'node-fetch'; 
import ReactMarkdown from 'react-markdown'; 
import path from 'path'; 
import Comments from './comment/record-comment'; 

//Loop through JSON and create Record and Comment Container Component 
const RecordFeed = props => { 
    return (
     <div> 
     { 
      props.records.map((record, index) => { 
       return (
        <RecordCard {...record} key={record.recordIdHash} user={props.user}> 
         { record.record_comments.map((comment, i) => 
          <Comments {...comment} key={comment.recordCommentId} /> 
         )} 
        </RecordCard> 
       ); 
      }) 
     } 
     </div> 
    ) 
} 

記録comment.js：

import React from 'react'; 

//Record Comment - Comment 
const Comment = props => { 
    return (
     <div> 
      <h5>{props.user_id}</h5> 
      <h4>{props.comment}</h4> 
      <h3>{props.app_user.fullNameSlug}</h3> 
     </div> 
    ) 
} 

//Record Comment - Container 
export default class Comments extends React.Component { 
    render() { 
     return (
      <Comment /> 
     ); 
    } 
} 

Answer 1

あなたは何もしませんCommentsコンポーネントをエクスポートしなければならないのはなぜ、などの輸出だけでCommentコンポーネントexport default Comment。

export default class Comments extends React.Component { render() { return ( <Comment {...this.props} /> ); } }

また、インポートされていないようだ - （私は考えることはできません）どのような場合にあなたがCommentsクラスをエクスポートする必要がない場合は、あなたのような子供に小道具を渡すことを確認してくださいあなたのRecordCardコンポーネント