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')
)