Fatal编程技术网
  • reactjs/
  • Reactjs 如何构造组件

Reactjs 如何构造组件

reactjs

Reactjs 如何构造组件,reactjs,Reactjs,我刚刚开始学习react，我想知道构建一个测试项目的最佳方法是什么 应用程序只有一页，并且必须： 有一个点击外部API的搜索，返回JSON JSON结果将以可读的格式显示给用户 有动态链接的按钮 有一个包含一些json数据的下拉列表 我认为每个组件都应该有一个组件，关联设置为“搜索”作为父组件，其他每个组件都直接从父组件继承 例如： app │   ├── search component │   │   ├── dropdown component │   │   ├── list com

我刚刚开始学习react，我想知道构建一个测试项目的最佳方法是什么

应用程序只有一页，并且必须：

  • 有一个点击外部API的搜索，返回JSON
  • JSON结果将以可读的格式显示给用户
  • 有动态链接的按钮
  • 有一个包含一些json数据的下拉列表
我认为每个组件都应该有一个组件，关联设置为“搜索”作为父组件，其他每个组件都直接从父组件继承

例如：

app
│   ├── search component
│   │   ├── dropdown component
│   │   ├── list component
│   │   ├── button component
│   │  
但这感觉是错误的做法。我在为州管理部门寻找redux，但我觉得这有点过分了。既然我需要访问每个组件的搜索数据，那么有没有更好的方法来构建它？谢谢

您的组件设计似乎适合您尝试构建的应用程序。在您的情况下，如果api中的数据很简单，并且状态可以由父组件管理，那么Redux确实是一种过度杀伤力

为您的未来道路提供几点建议：

  • 在
    Search
    组件的
    componentDidMount
    中调用api，以获取JSON数据并将其保存到组件的
    状态
  • 创建一个
    加载
    组件，当api调用完成时（
    状态
    没有数据），该组件将显示在
    搜索
    组件中
  • 将json数据从
    Search
    的
    state
    作为
    props
    传递给其子组件。仅传递与子级相关的
    状态部分
  • 将
    Search
    组件中的操作传递给子组件，以处理由于任何事件（如按钮单击、下拉更改等）导致的数据更改。这些操作将修改
    Search
    组件的
    状态，并通过道具将更改传递给子组件
    • 希望这有帮助