【ReactJs学习笔记】【父子组件用于传递数据— —Props】

【Javascript学习笔记】

目录

属性Props

原理

1.父组件通过属性的形式向子组件传递参数，而子组件通过this.props.xxx获取父组件传递过来的参数。
2.父组件获取子组件的传递值（即子组件与父组件的通信），子组件要调用父组件传递过来的方法。EX：父组件创建对应方法并通过属性传递一个方法给子组件，子组件通过props.方法（）获取

下面代码理解

CommentList作为Comment的父组件，通过标签的属性传递值给Comment，Comment用this.props.属性名 接收对应值。

代码

Comment

import React, { Component } from 'react';

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

export default Comment;

CommentList

import React,{Component} from 'react';
import Comment from "./Comment";

class CommentList extends Component{
    render(){
        return(
            <div>
                "KXX" date="2018-8-17">天气不错！
                "KXX2" date="2018-8-17">天气不错2！
            div>
        );
    }
}

export default CommentList;

效果

从父组件（祖先）获得数据

代码

index.js传递json数据到组件App

var comments = [
    { "author": "KXX", "date": "2018-8-17", "text":"天气不错！"},
    { "author": "KXX2", "date": "2018-8-17", "text":"天气不错2！"}
];

ReactDOM.render(<App data={comments} />, document.getElementById('root'));

App .js传递json数据到组件CommentBox

- <CommentBox />
+ <CommentBox data={this.props.data} />

同理，CommentBox到CommentList
。。。
CommentList.js

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

效果

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~