Ошибка импорта файла компонента в ReactJS

Question

Я новичок в React Framework. Я пытаюсь сделать это из моего Dishdetail. js Я вызываю компонент <Commentform />, чтобы он отображал мне кнопку Submit Comment button. Dishdetail.js совершенно нормально, поэтому я отправил только часть моего кода из Dishdetail.js, чтобы он не выглядел загроможденным. Проблема заключается в моем файловом компоненте CommentformComponent.js. Я получаю сообщения об ошибках импорта:

./src/Components/DishdetailComponent.jsAttempted import error: 'Commentform' is not exported from './CommentformComponent'.

Я написал свой экспорт из моего CommentforComponent.js, и вот мой полный код для CommenforComponent.js файл

///THIS IS MY Dishdetail.js file
import {Commentform} from './CommentformComponent';

function RenderComments({comments}){  
        if(comments!=null){           
            const dishComments=comments.map( (comment) => { 
            return( 
                  <ul key={comment.id} className = "list-unstyled">
                 <p>{comment.comment}</p>
                 <p>--{comment.author},{new Intl.DateTimeFormat('en-US', { year: 'numeric',month: 'short', day: '2-digit'}).format(new Date(Date.parse(comment.date)))} </p>
                 </ul>
                  );

        return(
            <div>
                <h4>Comments</h4>
                {dishComments}
                <Commentform />
            </div>
        )
    }
        else{
            return(
                <div></div>
            );
        }
    }

///CommentformComponent.js file
import React, {Component} from 'react';
import {  Button  } from 'reactstrap';
import {Link} from 'react-router-dom';
import {Control,LocalForm,Errors} from 'react-redux-form';

class Commentform extends Component{       
    render(){      
        return(

            <Button type="submit" color="outline-dark">
                <span className="fa fa-pencil fa-lg"></span>Submit Comment
            </Button>
        );
    }

}
export default Commentform;

Answer 1

Просто выполните:

import Commentform from './CommentformComponent';

Импорт компонента зависит от того, как вы его экспортируете:

export default Commentform;
import Commentform from './CommentformComponent';

или

export Commentform;
import { Commentform } from './CommentformComponent';