問題描述

react項(xiàng)目中，想實(shí)現(xiàn)一個(gè)根據(jù)左邊點(diǎn)擊元素，右邊顯示不同的內(nèi)容，這個(gè)要如何實(shí)現(xiàn)？

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

左邊的區(qū)域是子組件，右邊的內(nèi)容是放在很多的子組件中，因?yàn)橛疫叺膬?nèi)容是不同的，所以就分成幾個(gè)組件

【我的思路】：點(diǎn)擊左邊區(qū)域里面的不同節(jié)點(diǎn)，左邊的子組件會(huì)返回一個(gè)type給父級(jí)，在父級(jí)中根據(jù)type來加載右側(cè)區(qū)域的不同組件
【方法一】：將左側(cè)子組件中返回的type存放在父組件中的state中，然后在右側(cè)中來判斷這個(gè)type，根據(jù)type的不同，顯示不同的子組件。
【方法二】：在父組件中寫一個(gè)點(diǎn)擊事件的function，在子組件中調(diào)用，當(dāng)左側(cè)子組件中點(diǎn)擊的時(shí)候，調(diào)用父級(jí)中定義的這個(gè)function，然后在父級(jí)的function中，根據(jù)this.refs.xxx來顯示對(duì)應(yīng)的子組件。但是這里遇到一個(gè)問題，要如何動(dòng)態(tài)獲取這個(gè)refs中的xxx?我在右側(cè)組件中給每個(gè)組件的ref的值其實(shí)是等于子組件返回的這個(gè)type的。但是在function中用this.refs.type是undefined的?！締枴浚耗且绾尾拍芨鶕?jù)這個(gè)type來動(dòng)態(tài)獲取這個(gè)this.refs的節(jié)點(diǎn)？

相關(guān)代碼

方法一：

父組件：
    class Container extends Component {
        constructor() {
            super(...arguments);
            this.state = {
                type: '',
            }
        }
        
        let getType = (type) => {
            this.setState({type: type})
        }
        
        render() {
            return (
                <div className="wrapper">
                    <div className="app-left">
                        <ChileLeft getType={this.getType} />
                    </div>
                    <div className="app-right">
                        
                        <RightOne style={this.state.type=='type1'? {display:'block'}:{}} />
                        <RightTwo style={this.state.type=='type2'? {display:'block'}:{}} />
                        <RightThree style={this.state.type=='type3'? {display:'block'}:{}} />
                        ...
                    </div>
                </div>
            )
        }
    }

方法二：

父組件：
class Container extends Component {
    let getType = (type) => {
        this.refs.type.style.display = "block"  //在此處想根據(jù)這個(gè)type動(dòng)態(tài)來獲取this.refs要如何寫？我目前的這個(gè)寫法是錯(cuò)誤的，只是示例展示下我的想法
    }
    render () {
        return (
            <div className="wrapper">
                <div className="app-left">
                    <ChileLeft getType={this.getType} />
                </div>
                <div className="app-right">
                    <RightOne ref="type1" />
                    <RightTwo ref="type2" />
                    <RightThree ref="type3" />
                    ...
                </div>
            </div>
        )
    }
}

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

以上的兩個(gè)方法，個(gè)人感覺方法一太麻煩了，想用方法二，但是方法二就是不知道如何動(dòng)態(tài)獲取this.refs?
React都是自學(xué)的，沒React項(xiàng)目開發(fā)的經(jīng)驗(yàn)，所以在思維邏輯上還存在很大的問題，還請(qǐng)各位大神指點(diǎn)一二，謝謝了~
如果哪位大神有更好的思路，也請(qǐng)指點(diǎn)下，本人不勝感激