react同级组件之间传值

下面我们以一个评论的demo来讲述如何实现这个效果:

这里有一个比较重要的知识点就是关于props传值， 关于props这里我就不多进行阐述了

首先我们先规划好整个代码结构，commentInput存放的是我们输入的用户名信息以及评论内容

class CommentApp extends Component {    render() {        return (            <div>                <CommentInput />   //输入内容                <CommentList />    // 展示列表            </div>        )    }}

正如以上我们所看到的， CommentInput, CommentList是同级的两个组件， 那么我们如何才能将CommentInput内输入的值传递到CommentList中呢，从上述结构我们可以看到，CommentApp是充当了一个父组件的角色，所以它是可以充当桥接两个组件的桥梁的，即当我们点击发布按钮的时候，我们就将CommentInput中输入的评论内容传递给父组件，然后父组件再通过props将数据传递给CommentList.

接下来就来讲述下如何将CommentInput的值传递给CommentList

1. 在父组件中定义一个函数，将这个函数通过props传递给CommentInput

class CommentApp extends Component {    constructor() {        super()        this.state = {            info: []        }    }    handleSubmit(con){        console.log(con); //此处的con即表示接收到的评论内容    }    render() {        return (            <div>                <CommentInput onSubmit={ this.handleSubmit.bind(this) }/>   //输入内容                <CommentList />    // 展示列表            </div>        )    }}

1. 如上述代码， 这时候， 我们只要在CommentInput中，获取输入框的内容， 并将值传递给onSubmit函数即可。

class CommentInput extends Component {    handleClick() {        let inpText = this.refs.inp.value;  //此处可以用state        let txtText = this.refs.txt.value;  //此处可以用state        if (this.props.onSubmit) {            this.props.onSubmit({inpText, txtText});        }    }    render() {        return (            <div>                <input ref="inp" style={{                    display: 'block',                    width: 300                }}/>                <textarea ref="txt" style={{                    display: 'block',                    width: 300,                    height: 100,                    marginTop: 20                }}></textarea>                <button onClick={this.handleClick.bind(this)}>发布</button>            </div>        )    }}

1. 接下来就是处理列表数据的展示了，父组件在拿到了评论内容后就可以将数据传递给CommentList了。

//此时，可以将CommentApp中的render修改为render() {    return (        <div>            <CommentInput onSubmit={ this.handleSubmit.bind(this) }/>   //输入内容            <CommentList listContent={ this.state.info }/>    // 展示列表        </div>    )}

好了， 这样我们就实现了简单的发布评论的功能了， 本次主要是记录如何借助父级组件从而实现同级组件之间传值。

完整代码如下所示：

import React, {Component} from 'react';import ReactDOM from 'react-dom';import './index.css';class CommentApp extends Component {    constructor() {        super()        this.state = {            info: []        }    }    handleSubmit(con) {        this.state.info.push(con);        this.setState({info: this.state.info})    }    render() {        return (            <div>                <CommentInput onSubmit={this.handleSubmit.bind(this)}/>                <CommentList listContent={this.state.info}/>            </div>        )    }}class CommentInput extends Component {    handleClick() {        let inpText = this.refs.inp.value;        let txtText = this.refs.txt.value;        if (this.props.onSubmit) {            this.props.onSubmit({inpText, txtText});        }    }    render() {        return (            <div>                <input ref="inp" style={{                    display: 'block',                    width: 300                }}/>                <textarea ref="txt" style={{                    display: 'block',                    width: 300,                    height: 100,                    marginTop: 20                }}></textarea>                <button onClick={this.handleClick.bind(this)}>发布</button>            </div>        )    }}class CommentList extends Component {    static defaultProps = {        listContent: []    }    render() {        return (            <ul>                {/*<li>{ this.props.listContent.length }</li>*/}                {                    this.props.listContent.map((item, index) => {                        return (                            <li key={index} style={{                                listStyle: 'none'                            }}>                                <span >{item.inpText}--</span>                                <span>{item.txtText}</span>                            </li>                        )                    })                }            </ul>        )    }}ReactDOM.render(    <CommentApp/>,    document.getElementById('root'))