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。如果在任何情况下（我无法想到）你确实需要导出Comments类，请确保将道具传递给孩子，如 -

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

此外，您似乎无法导入RecordCard组件

ReactJS - 将数组传递给导入的组件

1 个答案: