React系列三——props属性

最新推荐文章于 2025-05-30 21:57:11 发布

可芭乐

最新推荐文章于 2025-05-30 21:57:11 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： react基础系列

本文链接：https://blog.youkuaiyun.com/a839371666/article/details/79391794

react基础系列专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用React创建子组件来展示评论数据。通过子组件Comment展示每条评论的作者、日期及内容，并在父组件CommentList中循环渲染多个Comment实例。此外还介绍了如何从main.js文件或服务端获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件

'use strict'

import React from 'react';

class Comment extends React.Component {
    render() {
        return (
            <div className="comment">
                <div className="content">
                    <span className="author">{this.props.author}</span>
                    <div className="metadata">
                        <span className="date">{this.props.date}</span>
                    </div>
                    <div className="text">{this.props.children}</div>
                </div>
            </div>
        )
    }
}

export { Comment as default };   //输出CommentBox组件作为默认的东西

父组件

'use strict'

import React from 'react'
import Comment from './Comment'

class CommentList extends React.Component{
    render() {
        return (
            <div>
                <Comment author="lff" date="5 minutes">11111111</Comment>
                <Comment author="ffl" date="3 minutes">2222</Comment>
            </div>

        )
    }
}

export { CommentList as default };   //输出CommentBox组件作为默认的东西

这里写图片描述

从上一级组件中获取数据

在main.js文件中存在数据

var comments = [
  {"author": "lff", "date": "5 minutes", "text": "11111"},
  {"author": "ffl", "date": "3 minutes", "text": "22222"}
];

ReactDom.render(
  <CommentBox data={comments}/>,
document.getElementById('app')
) ;

在CommentBox组件中获取main数据

<CommentList data = {this.props.data} />

在CommentList组件中循环展示

class CommentList extends React.Component{
    render() {
        let commentNodes = this.props.data.map(comment => {
            return(
                <Comment author={comment.author} date={comment.date}>{comment.text}</Comment>
            )
        })
        return (
            <div>
                {commentNodes}
            </div>

        )
    }
}