效果

代码

import React from 'react';
import ReactDOM from 'react-dom/client';

class Demo extends React.Component {
     state = {
        list:[],
        input:"",
        textarea:""

    }
    getFooter(){
        if(this.state.list.length===0){
            return (
                <p>暂时未有评论....</p>
            )
        }
        return (
            this.state.list.map((item,index)=><p key={index} style={{background:"pink"}}>{item.name}：{item.contents}</p>)
        )
    }
    handleClick=()=>{
        let name = this.state.input
        let contents = this.state.textarea
        if(name.trim().length===0)return alert("name is null")
        if(contents.trim().length===0)return alert("contents is null")

        let arr = this.state.list
        arr.unshift({name,contents})
        this.setState({
            list:arr,
            input:"",
            textarea:""
        })
    }
    handleChanage=(e)=>{
        // react处理过事件e的兼容，兼容所有，不需要担心
        let v = e.target.value
        let name = e.target.name
        let data = {}
        data[name] = v
        this.setState(data)
    }
    render(){
        return (
            <div style={{border:"solid 1px #ccc",width:"300px"}}>
                <div>
                    <span>评价人:</span>
                    <input type="text" value={this.state.input} onChange={this.handleChanage} name="input" />
                    <button onClick={this.handleClick}>添加评论</button>
                </div>
                <div>
                    <textarea name="textarea" id="" cols="30" rows="10" value={this.state.textarea} onChange={this.handleChanage}></textarea>
                </div>
                <div>
                    <div>{this.getFooter()}</div>
                    
                </div>
            </div>
        )
    }
}
ReactDOM.createRoot(document.getElementById("root")).render(<Demo />)

 注意点

1，组件名字首字母必须大写

2， class 创建的组件必须要有render方法，并且要有返回值

3，如果是函数创建的组件，必须要有return（返回）值 

4，class和函数创建组件的区别在于，函数是静态的，class是动态的，可以驱动ui

5，想要动态的更改值需要用到"setState"方法，里面转一个对象，要改啥就填什么属性

6，jsx中使用函数，需要注意this指定，默认this是undefined,需要自己改，要么给点击函数弄成箭头函数要么使用bind方法，初始化的时候绑定this

7，style注意是一个对象，就是要两个大括号，其它的都是一个括号，并且不需要引号引起来