ReactJS中组件文件的导入错误

Question

我对React Framework还是很陌生，我想做的是从我的Dishdetail.js中调用<Commentform />组件，以便它向我显示一个按钮Submit Comment按钮。 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';