问题描述
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项目开发的经验,所以在思维逻辑上还存在很大的问题,还请各位大神指点一二,谢谢了~
如果哪位大神有更好的思路,也请指点下,本人不胜感激
记住 react 的一个思想,那就是:
jsx 也是 js
jsx 也是 js
jsx 也是 js
什么意思呢?
就是你可以吧一个组件当做
js
一样调用,当做变量之类的...栗子:
也可以
所以你可以点击左边的改变 type
右边直接
或者
完整栗子: