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

在父组件中定义一个函数，将这个函数通过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> ) } } 如上述代码， 这时候， 我们只要在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> ) } } 接下来就是处理列表数据的展示了，父组件在拿到了评论内容后就可以将数据传递给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') )