0

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

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 的 commentForm 的内容。我没有收到任何错误，但代码未在前端显示 commentForm 的内容。

4

1 回答 1

1

您应该以大写字母开头命名您的组件，commentForm应重命名为class CommentForm extends Component {}.

形成React 文档：

用户定义的组件必须大写 当元素类型以小写字母开头时，它指代一个内置组件，如 <div>or<span>并导致传递给 React.createElement 的字符串 'div' 或 'span'。以大写字母开头的类型，如编译为 React.createElement(Foo) 并对应于 JavaScript 文件中定义或导入的组件。

我们建议使用大写字母命名组件。如果您确实有一个以小写字母开头的组件，请在 JSX 中使用它之前将其分配给大写变量。

于 2020-09-26T18:58:07.833 回答