ReactJS实现一个简单的评论列表

2021-03-16 12:59:14 阅读：177 来源： 互联网

标签：java render ReactJS 列表 content item 评论 user id

class CmtList extends React.Component {
    constructor() {
        super();
        this.state = {
            CommentList: [
                {id:1, user: 'sss', content: 'java'},
                {id:2, user: 'sss', content: 'java'},
                {id:3, user: 'sss', content: 'java'},
                {id:4, user: 'sss', content: 'java'},
            ]
        }
    }

    render() {
        return <div>
            <h1> 这是评论列表组件 </h1>
            {this.state.CommentList.map(item => <div>{item.user}</div>)}
        </div>
    }
}

ReactDOM.render(<div>
    <CmtList>
    </CmtList>
</div>, document.getElementById('example'));

仔细观察，item 里的字段都来自外界，并非该组件，所以定义成无状态的 function 最好。

function CmtItem(props) {
    return <div key={props.user}>
        <h1>评论人：{props.user}</h1>
        <p>评论内容：{props.content}</p>
    </div>
}

这么使用 render 函数

render() {
    return <div>
        <h1> 这是评论列表组件 </h1>
        {this.state.CommentList.map(item => <CmtItem {...item}></CmtItem>)}
    </div>
}

标签：java,render,ReactJS,列表,content,item,评论,user,id
来源： https://blog.csdn.net/qq_33589510/article/details/114837478

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ReactJS实现一个简单的评论列表