ReactJS在组件之间传递数据(搜索栏)

时间:2018-09-11 23:37:03

标签: javascript reactjs

大家好,我正在使用react做一个搜索栏,并得到了一个程序,然后才在组件parent> child,child> parent之间传递数据,但是现在我需要从src> components> toolbar> search bar传递给src>容器>类别组件,有人可以帮助我吗?谢谢

4 个答案:

答案 0 :(得分:1)

我看着您的问题,想到的第一个想法就是介绍Redux。

您可以通过使用npm安装一些软件包来做到这一点。

老实说,我可以继续前进,告诉您如何整合每个小细节。但我不会这样做,而是向您概述如何使用该技术以使自己受益。请注意,这将需要一些时间来掌握,但是这样做会大大增强您设计复杂系统的能力。

  1. 首先,您将需要了解有关Redux如何存储和数据的更多信息。这是Redux Redux course的创建者Dan Abramov的入门课程。时间不长,而且免费!

  2. 一旦您熟悉商店,减速器,动作创建者,动作和提供者组件--->关闭您的笔记本电脑<---并拿出笔和纸,将地狱勾勒出来哪里。例如,您的搜索数据属于处理该数据的精简器,并且您还必须相应地设计操作以及读取其有效负载并将其映射到商店。

  3. 现在将其编码。完成设计并获得有关如何使用redux进行开发的必要信息后,应该在公园中漫步。

希望这对您的问题有所帮助。

答案 1 :(得分:1)

实现此目标的另一种方法是创建并调度一个事件,并将其在组件中列出。

- (IBAction)btnChinese:(id)sender {

    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    [defaults setObject:@"CN" forKey:@"txtLanguage"];

    [(AppDelegate*)[UIApplication sharedApplication].delegate setupTabBar];

    UINavigationController *navigationController = self.navigationController;
    [navigationController popViewControllerAnimated:YES];
}

答案 2 :(得分:0)

我认为解决该问题的最佳方法是使用Redux(https://redux.js.org/basics/usagewithreact),该Redux通常用于存储值,并且可以在整个应用程序文件中使用它。

以下链接将帮助您了解Redux以及如何实现您的react应用程序: https://github.com/bradtraversy/redux_crash_course

https://www.youtube.com/watch?v=93p3LxR9xfM&t=537s

https://github.com/bradeac/using-redux-with-react/tree/master/src

答案 3 :(得分:0)

您可以将数据传递给最高父级,然后再次传递给您想要的子级。