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

问题描述

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

阅读 7.2k
2 个回答

记住 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;

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题