Javascript 基于类的组件在ReactJs应用程序中未按预期工作

我试图在功能组件的一部分中显示基于类的组件的内容，但它不起作用。 基于类的组件：

class commentForm extends Component {
    render() {
        return(
            <div>
                <h1>Hello</h1>
                <Button class="btn btn-light"><span className="fa fa-comment-o"></span> Submit 
                comment</Button>
            </div>
        );
    }
}

function RenderComments({comments})
{
    if(comments!=null)
    {
        return (
            <div className="col-12 col-md-5 m-1">
                <h4>Comments</h4>
                <ul className="list-unstyled">
                    {comments.map((comment)=>{
                        return(
                            <li key={comment.id}>
                                <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>
                            </li>
                        );
                    })}
                </ul>                
                <commentForm />
                {commentForm}
            </div>
        )
    }
    else{
        return(
            <div></div>
        );
    }
}

类commentForm扩展组件{
render（）{
返回(
你好
提交
评论
);
}
}

功能组件：

class commentForm extends Component {
    render() {
        return(
            <div>
                <h1>Hello</h1>
                <Button class="btn btn-light"><span className="fa fa-comment-o"></span> Submit 
                comment</Button>
            </div>
        );
    }
}

function RenderComments({comments})
{
    if(comments!=null)
    {
        return (
            <div className="col-12 col-md-5 m-1">
                <h4>Comments</h4>
                <ul className="list-unstyled">
                    {comments.map((comment)=>{
                        return(
                            <li key={comment.id}>
                                <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>
                            </li>
                        );
                    })}
                </ul>                
                <commentForm />
                {commentForm}
            </div>
        )
    }
    else{
        return(
            <div></div>
        );
    }
}

函数RenderComments（{comments}）
{
if（注释！=null）
{
返回(
评论

{comments.map（（comment）=>{
返回(

{comment.comment}

--{comment.author}，{new Intl.DateTimeFormat（'en-US'，{year:'numeric'，month:'short'，day:'2位'}）.format（new Date（Date.parse（comment.Date））}


);
})}

{commentForm}
)
}
否则{
返回(
);
}
}

---

这里我想显示RenderComments中commentForm的内容。我没有收到任何错误，但是代码没有在前端显示commentForm的内容。

您应该以大写字母开头命名组件，

commentForm

应该重命名为

class commentForm extends component{}

表格：

当元素类型为时，用户定义的组件必须大写 以小写字母开头，它指的是内置组件，如

或

并导致传递给的字符串'div'或'span' React.createElement。以大写字母开头的类型，如compile to React.createElement（Foo）并对应于组件 在JavaScript文件中定义或导入

我们建议使用大写字母命名组件。如果你有 以小写字母开头的组件，将其分配给 在JSX中使用前，先将变量大写