React如何实现两组件取值传递至第三组件返回水果保质期结果

功能模块划分 #

整个功能拆分为3个独立组件协同工作：

• 水果类型选择组件：使用radio单选按钮提供三类水果的选项供用户点选
• 存储参数选择组件：搭载两个range滑块控件，分别支持用户调整存储数量、存储温度两个参数
• 保质期结果展示组件：接收前两个组件的用户选择值，匹配后展示对应保质期天数

核心实现逻辑 #

提前配置好存储所有保质期规则的数组，每次用户调整任意选择项时，触发匹配逻辑：遍历预设数组，找到同时满足「水果类型匹配、存储数量匹配、存储温度匹配」三个条件的对象，将该对象的保质期天数（单位：天）渲染到结果展示组件即可。

匹配示例：用户选中水果为Apple、存储数量设为10、存储温度设为30时，直接返回数组中符合该组条件的完整对象，在结果组件中做展示。

参考交互示例 #

可参考以下素材对齐实现效果：

• radio单选水果选择组件截图
• 存储数量调节range滑块截图
• 存储温度调节range滑块截图
• 预设规则数组array数据结构截图
• 前端页面最终运行效果截图

内容的提问来源于stack exchange，提问作者Tarek