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

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

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

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

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

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

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

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

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

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

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

//此时，可以将CommentApp中的render修改为@H_502_10@

render() {
    return@H_502_10@ (
        <div@H_502_10@>
            <CommentInput onSubmit={ this@H_502_10@.handleSubmit.bind(this@H_502_10@) }/>   //输入内容@H_502_10@
            <CommentList listContent={ this@H_502_10@.state.info }/>    // 展示列表@H_502_10@
        </div@H_502_10@>
    )
}

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

完整代码如下所示：

import React,{Component} from 'react'@H_502_10@;
import ReactDOM from 'react-dom'@H_502_10@;
import './index.css'@H_502_10@;

class@H_502_10@ CommentApp@H_502_10@ extends@H_502_10@@H_502_10@ Component@H_502_10@ {@H_502_10@
    constructor() {
        super@H_502_10@()
        this@H_502_10@.state = {
            info: []
        }
    }
    handleSubmit(con) {
        this@H_502_10@.state.info.push(con);
        this@H_502_10@.setState({info: this@H_502_10@.state.info})
    }
    render() {
        return@H_502_10@ (
            <div@H_502_10@>
                <CommentInput onSubmit={this@H_502_10@.handleSubmit.bind(this@H_502_10@)}/>
                <CommentList listContent={this@H_502_10@.state.info}/>
            </div@H_502_10@>
        )
    }
}

class@H_502_10@ CommentInput@H_502_10@ extends@H_502_10@@H_502_10@ Component@H_502_10@ {@H_502_10@
    handleClick() {
        let inpText = this@H_502_10@.refs.inp.value;
        let txtText = this@H_502_10@.refs.txt.value;
        if@H_502_10@ (this@H_502_10@.props.onSubmit) {
            this@H_502_10@.props.onSubmit({inpText,marginTop: 20@H_502_10@
                }}></textarea>
                <button onClick={this@H_502_10@.handleClick.bind(this@H_502_10@)}>发布</button>
            </div@H_502_10@>
        )
    }
}

class@H_502_10@ CommentList@H_502_10@ extends@H_502_10@@H_502_10@ Component@H_502_10@ {@H_502_10@
    static@H_502_10@ defaultProps = {
        listContent: []
    }
    render() {
        return@H_502_10@ (
            <ul>
                {/*<li>{ this.props.listContent.length }</li>*/@H_502_10@}
                {
                    this@H_502_10@.props.listContent.map((item,index@H_502_10@) => {
                        return@H_502_10@ (
                            <li key={index@H_502_10@} style={{
                                listStyle: 'none'@H_502_10@
                            }}>
                                <span >{item.inpText}--</span>
                                <span>{item.txtText}</span>
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}

ReactDOM.render(
    <CommentApp/>,document.getElementById('root'@H_502_10@)
)