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: 
                }}/>
                <textarea ref="txt" style={{
                    display: 'block',
                    width: ,
                    height: ,
                    marginTop: 
                }}></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: 
                }}/>
                <textarea ref="txt" style={{
                    display: 'block',
                    width: ,
                    height: ,
                    marginTop: 
                }}></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')
)