两个毫无关系的组件,怎么传值也?

#1

我在一个多选组件里面,存了一个stuList数组,用于存放多选的值。
在另一个单选组件里面,想实现改变内容时,清空stuList数组里面的内容。
所以现在的问题就是我在单选改变内容时,找不到stuList数组,怎么办呢?

还有一个问题,老问题了,就是react+antd的Checkbox 怎么获取选中的值呀。。。

希望有大神能解决我的问题,困扰我一天了!

#2

将两个组件放在一个共同的父组件下面,stuList存在父组件通过props传下去,在父组件中写一个改变stuList的方法传给子组件,子组件数据变化的时候调用props传过来的方法去改变。或者也可以用Context,看官方文档。
antd的话CheckBox不是有一个checked属性吗,你的数据肯定都是一个数组啊,遍历的时候根据你需要的条件判断checked属性啊

#3

为什么我会感觉贼麻烦呢?想想jquery,太简单了!这不是把简单问题,复杂话了吗。。。。真是搞不懂,但是为什么react又这么火热呢。。。可能是我还没有领会到它的精髓吧!我再根据你的思路去尝试下。3Q,不行再来探讨下。你也可以给我说下我回你信息的前半段内容,你的看法是什么?

#4

我的天,这个论坛是真的厉害,此处省略100字。
为什么我会感觉贼麻烦呢?想想jquery,太简单了!这不是把简单问题,复杂话了吗。。。。真是搞不懂,但是为什么react又这么火热呢。。。可能是我还没有领会到它的精髓吧!我再根据你的思路去尝试下。3Q,不行再来探讨下。你也可以给我说下我回你信息的前半段内容,你的看法是什么?

#5

本身你两个组件想要改变的就是同一数据源,所以才要将stuList放到两个组件共同的部分才能处理,而且也不麻烦啊。

#6

或者试试mobx, redux这些。

#7

我说一些不相干的。老铁,你现在是入门阶段,真的是还没感受到react的强大和牛逼的地方。等你的jquery思维转换过来,就是另外一个世界了,我们也是这么过来的,楼主,不要放弃,加油。

#8

说些相干的
组件A 下面有组件B和组件C。你数据,在你这里是stuList放在组件A里,通过传给组件B的prop stuList传值。现在组件B里面有数组了,直接渲染。组件C,要想改组件B的stuList,你这里是想清空。一般的jquery思想是,查找B组件的实例,通过调用它的方法清空。但是react中,都是数据的思想。

你应该绕回去,组件B的数据哪里来,是A的。

所以你应该改A的数据,A的数据变了,B的数据也变了(通过props拿的),B的UI也会变了,这个叫数据驱动。

所以,你应该是C去改变A的思路。

一般是A通过prop给C组件传一个clearStuList={ () => this.setState( { stuList: [] } ) }

类似这种的,所以组件C就能通过this.props.clearStuList去拿到这个回调函数了(箭头函数),然后C中的组件比如点击的时候,你执行this.props.clearStuList()

A的数据就清空了,是不是?

你这步能想明白,差不多就懂了,剩下的就是多用这种思路去写其他的逻辑。

不要听楼上一样,一开始就去接触mobx,或者redux,简直就是让你弃坑。

#9

试试react-control-center, 让你更优雅的传值

#10

嗯,redux应该是可以的!

#11

对呀,老铁,才看react没几天呢!我会加油的!

#12

嗯,有点那个意思了!我得慢慢转变一下这种思路,不能按常规出牌!

#13

值得去研究一下,所有的方法都可以看看。