28_组件通信的2种方式

方式一：通过Props传递

　　1.共同的数据放在父组件上，特有的数据放在自己组件内部(state)

　　2.通过props可以传递一般数据和函数数据，只能一层一层传递

　　3.一般数据——>父组件传递数据给子组件——>子组件读取数据

　　4.函数数据——>子组件传递数据给父组件——>子组件调用函数

方式二：使用消息订阅(subscribe)-发布(publish)机制

　　1.工具库：PubSubJS

　　2.下载：npm install --save pubsub-js

代码：

import React from 'react'
import PubSub from 'pubsub-js'

import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'

export default class App extends React.Component {
    // 第一种初始化数据对象方法
    /*    constructor(props) {
            super(props)
            this.state = {
                comments: [
                    {username: 'Tom', content: 'react挺好的！'},
                    {username: 'Jack', content: 'react有点难！'}
                ]
            }
        }*/

    //第二种初始化数据对象方法,给对象指定state属性
    state = {
        comments: [
            {username: 'Tom', content: 'react挺好的！'},
            {username: 'Jack', content: 'react有点难！'},
            {username: 'Jensen', content: '干就完事儿了！'}
        ]
    }

    componentDidMount() {
        //订阅消息
        PubSub.subscribe('deleteComment', (msg, index) => {
            this.deleteComment(index)
        })

    }

    //添加评论
    addComment = (comment) => {
        //得到状态
        const {comments} = this.state;
        //修改状态内容
        comments.unshift(comment);
        //最后更新状态
        this.setState({comments});
    }
    //删除指定评论
    deleteComment = (index) => {
        const {comments} = this.state
        //  splice可以进行三种操作，增(index,0,{})、删(index,1)、改(index,1,{})
        comments.splice(index, 1);

        //更新状态
        this.setState({comments});
    }

    render() {
        const {comments} = this.state
        return (
            <div>
                <div>
                    <header className="site-header jumbotron">
                        <div className="container">
                            <div className="row">
                                <div className="col-xs-12">
                                    <h1>请发表对React的评论</h1>
                                </div>
                            </div>
                        </div>
                    </header>
                    <div className="container">
                        <CommentAdd addComment={this.addComment}/>
                        <CommentList comments={comments}/>
                    </div>
                </div>

            </div>
        )
    }
}

app.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import CommentItem from '../comment-item/comment-item'
import './commentList.css'

export default class CommentList extends Component {
    //指定组件类型.
    static propTypes = {
        comments: PropTypes.array.isRequired,
    };

    render() {
        const {comments, deleteComment} = this.props
        //判断是显示还是隐藏
        const display = comments.length === 0 ? 'block' : 'none'
        return (
            <div className="col-md-8">
                <h3 className="reply">评论回复：</h3>
                <h2 style={{display}}>暂无评论，点击左侧添加评论！！！</h2>
                <ul className="list-group">
                    {
                        comments.map((c, index) => <CommentItem comment={c} key={index} index={index}/>)
                    }
                </ul>
            </div>
        )
    }
}
//这种属性方式有点麻烦
/*
CommentList.propTypes = {
    comments: PropTypes.array.isRequired
}*/

comment-list.jsx

import React, {Component} from 'react';
import PropTypes from 'prop-types'
import './commentItem.css'
import PubSub from 'pubsub-js'

export default class CommentItem extends Component {
    static propTypes = {
        comment: PropTypes.object.isRequired,
        index: PropTypes.number.isRequired
    }
    handleClick = () => {
        const {comment, deleteComment, index} = this.props
        //提示
        if (window.confirm(`确定删除${comment.username}的评论吗`)) {
            //确定后删除
            //因为发生了事件，所以这地方是发布消息
            PubSub.publish('deleteComment', index)
        }
    }

    render() {
        const {comment} = this.props
        return (
            <li className="list-group-item">
                <div className="handle">
                    <a href="javascript:;" onClick={this.handleClick}>删除</a>
                </div>
                <p className="user"><span>{comment.username}</span><span>说:</span></p>
                <p className="centence">{comment.content}</p>
            </li>
        );
    }
}

comment-item.jsx

28_组件通信的2种方式

猜你喜欢