Class 基于组件在 React Js 应用程序中未按预期工作

Question

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

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 的内容。

Answer 1

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

形成React docs:

User-Defined Components Must Be Capitalized When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

Class 基于组件在 React Js 应用程序中未按预期工作

Class based component is not working as expected in ReactJs appication

javascript

reactjs

react-component

react-functional-component

react-class-based-component