react项目中根据左边点击元素的不同，右边显示不同的内容？

Question

问题描述

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项目开发的经验，所以在思维逻辑上还存在很大的问题，还请各位大神指点一二，谢谢了~
如果哪位大神有更好的思路，也请指点下，本人不胜感激

Answer 1

记住 react 的一个思想，那就是：

• jsx 也是 js
• jsx 也是 js
• jsx 也是 js

什么意思呢？
就是你可以吧一个组件当做js一样调用，当做变量之类的...
栗子：

let one=<RightOne/>
let two=<RightTwo/>
let three=<RightTwo/>

也可以

let right=[
<RightOne/>,<RightTwo/>,<RightTwo/>
]

所以你可以点击左边的改变 type
右边直接

{right[type]}

或者

{
                        this.state.type == 0
                            ? <p>0</p>
                            : this.state.type == 1
                                ? <p>1</p>
                                : <p>2</p>
                    }

完整栗子：

class App extends Component {
    constructor() {
        super()
        this.state = {
            type: 0
        }
        this.right = [
            <p>0</p>,
            <p>1</p>,
            <p>2</p>,
        ]
    }

    componentDidMount() {

    }


    render() {
        return (
            <div>
                <div>
                    <button onClick={() => this.setState({type: 0})}>0</button>
                    <button onClick={() => this.setState({type: 1})}>1</button>
                    <button onClick={() => this.setState({type: 2})}>2</button>
                </div>
                // 方式1
                <div>
                    {
                        this.right[this.state.type]
                    }
                </div>
                // 方式2
                <div>
                    {
                        this.state.type == 0
                            ? <p>0</p>
                            : this.state.type == 1
                                ? <p>1</p>
                                : <p>2</p>
                    }
                </div>
            </div>
        );
    }


}

export default App;

Answer 2

将type存放在state中，然后更加type来加载不同的组件，这个type的名同组件的别名一致即可，import * as Field = "xxxx", let C = Field[this.state.type], <C />方式引用