问题描述

react项目中，想实现一个根据左边点击元素，右边显示不同的内容，这个要如何实现？

问题出现的环境背景及自己尝试过哪些方法

左边的区域是子组件，右边的内容是放在很多的子组件中，因为右边的内容是不同的，所以就分成几个组件

【我的思路】：点击左边区域里面的不同节点，左边的子组件会返回一个type给父级，在父级中根据type来加载右侧区域的不同组件
【方法一】：将左侧子组件中返回的type存放在父组件中的state中，然后在右侧中来判断这个type，根据type的不同，显示不同的子组件。
【方法二】：在父组件中写一个点击事件的function，在子组件中调用，当左侧子组件中点击的时候，调用父级中定义的这个function，然后在父级的function中，根据this.refs.xxx来显示对应的子组件。但是这里遇到一个问题，要如何动态获取这个refs中的xxx?我在右侧组件中给每个组件的ref的值其实是等于子组件返回的这个type的。但是在function中用this.refs.type是undefined的。【问】：那要如何才能根据这个type来动态获取这个this.refs的节点？

相关代码

方法一：

父组件：
    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"  //在此处想根据这个type动态来获取this.refs要如何写？我目前的这个写法是错误的，只是示例展示下我的想法
    }
    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>
        )
    }
}

你期待的结果是什么？实际看到的错误信息又是什么？

以上的两个方法，个人感觉方法一太麻烦了，想用方法二，但是方法二就是不知道如何动态获取this.refs?
React都是自学的，没React项目开发的经验，所以在思维逻辑上还存在很大的问题，还请各位大神指点一二，谢谢了~
如果哪位大神有更好的思路，也请指点下，本人不胜感激