In the react project, different contents are displayed on the right according to the elements clicked on the left.

problem description

In the

react project, how do you implement a display of different content on the right based on clicking on the element on the left?

the environmental background of the problems and what methods you have tried

the area on the left is a subcomponent, and the content on the right is placed in many subcomponents. Because the content on the right is different, it is divided into several components

[my idea]: click on the different nodes in the left area, the child components on the left will return a type to the parent, and load different components in the right area according to type in the parent
[method 1]: store the type returned in the left child component in the state in the parent component, and then in the right side to judge the type, according to the different type, display different child components.
[method 2]: the function, that writes a click event in the parent component is called in the child component. When clicked in the left child component, the function, defined in the parent is called and then the corresponding child component is displayed according to this.refs.xxx in the parent function. But there is a problem here, how to get the xxx? in this refs dynamically. The value I gave to the ref of each component in the right component is actually equal to the type returned by the subcomponent. But using this.refs.type in function is undefined. [Q]: then how can we dynamically obtain the nodes of this type based on this this.refs?

related codes

method 1:

:
    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>
            )
        }
    }

method 2:

:
class Container extends Component {
    let getType = (type) => {
        this.refs.type.style.display = "block"  //typethis.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>
        )
    }
}

what result do you expect? What is the error message actually seen?

the above two methods, I feel that method one is too troublesome, and I want to use method two, but method two is that I don"t know how to dynamically obtain this.refs?
React is self-taught and have no experience in React project development, so there are still great problems in thinking logic. I would also like to ask all the great gods to point out one or two, thank you ~
if any of the great gods have better ideas, I would appreciate it

React.js

Apr.01,2021

{ this.state.type == 0 ? 0 : this.state.type == 1 ? 1 : 2 }

class App extends Component { constructor() { super() this.state = { type: 0 } this.right = [ 0, 1, 2, ] } 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 ? 0 : this.state.type == 1 ? 1 : 2 } </div> </div> ); } } export default App;