react-组件间的通信

方式一：通过props传递（只能父子之间传值）

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

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

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

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

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

1.工具库：PubSubJS

2.下载：npm install pubsub --save

在使用PubSub之前是使用props传递的：祖组件<--->父组件<--->子组件

祖组件：

import React,{Component} from 'react'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'
import '../../../main.css'
export default class App extends Component{
    state={
        comments:[
            {username:'tom',content:'reactr'},
            {username:'jack',content:'qweq'},
        ]
    }
    deleteComment = (index) => {
        const {comments} = this.state
        comments.splice(index,1)
        this.setState({comments})
    }
    render(){
        const {comments}=this.state
        return(
            <div>
                <h1 className="title">TITLE，TITLE，TITLE</h1>
                <CommentAdd/>
                <CommentList comments={comments} deleteComment={this.deleteComment}/>
　　　　　　　　　　　　//　　　　　　传递参数 　　　　　　　　　　　　传递方法
            </div>
        )
    }
}

父组件：

import React,{Component} from 'react'
import PropTypes from '_prop-types@15.7.2@prop-types'
import CommentItem from '../comment-item/comment-item'
export default class CommentList extends Component{
    static propTypes={//接收并定义类型和限制
        comments:PropTypes.array.isRequired,
        deleteComment:PropTypes.func.isRequired
    }
    render(){
        const {comments,deleteComment}=this.props
        const display = comments.length==0?'block':'none'
        return(
            <div className="commentList">
                <h3>评论回复：</h3>
                <h4 style={{display}}>贺岁档和附件三</h4>
                <ul>
                    {comments.map((comment,index) => <CommentItem comment={comment} key={index} deleteComment={deleteComment} index={index}/>)}
　　　　　　　　　　　　　　//　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　   　　再次传递方法
                </ul>
            </div>
        )
    }
}

子组件：

import React,{Component} from 'react'
import PropTypes from 'prop-types'
export default class CommentItem extends Component{
    static propTypes = {//接收参数和方法，定义类型和限制
        comment:PropTypes.object.isRequired,
        deleteComment:PropTypes.func.isRequired,
        index:PropTypes.number.isRequired
    }
    handleDelete = () => {
        const {comment,deleteComment,index} = this.props
        //提示
        if(window.confirm(`确定删除${comment.username}的评论吗？`)){
            //确定后删除
            deleteComment(index)
            //        调用
        }
    }
    render(){
        const {comment} = this.props
        return(
            <li>
                <div className="commentItem">
                    <p>{comment.username}:</p>
                    <p>{comment.content}</p>
                    <button onClick={this.handleDelete}>delete</button>
                </div>
            </li>
        )
    }
}    

使用PubSubJS传递：

子组件：

import React,{Component} from 'react'
import PropTypes from 'prop-types'
import PubSub from 'pubsub-js'
export default class CommentItem extends Component{
    static propTypes = {
        comment:PropTypes.object.isRequired,
        index:PropTypes.number.isRequired
    }
    handleDelete = () => {
        const {comment,index} = this.props
        //提示
        if(window.confirm(`确定删除${comment.username}的评论吗？`)){
            //确定后删除
            //发布消息（一个叫delete的方法），index是要传的参数
            PubSub.publish('delete',index)
        }
    }
    render(){
        const {comment} = this.props
        return(
            <li>
                <div className="commentItem">
                    <p>{comment.username}:</p>
                    <p>{comment.content}</p>
                    <button onClick={this.handleDelete}>delete</button>
                </div>
            </li>
        )
    }
}

祖组件：

import React,{Component} from 'react'
import PubSub from 'pubsub-js'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'
import '../../../main.css'
export default class App extends Component{
    state={
        comments:[
            {username:'tom',content:'reactreactreactreactreactreact'},
            {username:'jack',content:'qweqweqweqweqweqwe'},
        ]
    }
    componentDidMount() {
        //订阅一个叫delete的消息
        PubSub.subscribe('delete',(msg,index) => {
            this.deleteComment(index)
        })
    }
    addComment = (comment) => {
        //获取
        const {comments} = this.state
        //修改
        comments.unshift(comment)/**/
        //状态更新
        this.setState({comments})
    }
    deleteComment = (index) => {
        //获取
        const {comments} = this.state
        //删除
        comments.splice(index,1)
        //状态更新
        this.setState({comments})
    }
    render(){
        const {comments}=this.state
        return(
            <div>
                <h1 className="title">TITLE，TITLE，TITLE</h1>
                <CommentAdd addComment={this.addComment}/>
                <CommentList comments={comments}/>
            </div>
        )
    }
}

方式三：redux（重点哦）

先略过