ReactJS中如何使用if条件判断匹配预测结果展示对应材料说明？

从你贴的代码片段看，当前项目用的是React类组件写法，完全不需要引入复杂的第三方方案，用「配置对象映射 + 基础条件渲染」就能实现逻辑清晰的分类引导展示，代码量少、后期好维护，没有React经验也能快速改明白。

核心实现步骤 #

• 第一步：抽离所有分类对应的说明内容为独立配置对象
  不要把文案硬写在JSX的嵌套条件判断里，集中管理配置后，后续改文案、加分类都不需要改动核心渲染逻辑：

  // 放在组件作用域外定义静态配置即可
  const MATERIAL_GUIDE = {
    metal: {
      title: "金属类投放提示",
      desc: "投放前请清空内容物、简单清洁，易拉罐、金属包装可压扁节约收纳空间，避免尖锐边角划伤。"
    },
    plastic: {
      title: "塑料类投放提示",
      desc: "清洁干燥的塑料瓶、泡沫、塑料餐具都属于可回收塑料，沾染油污的一次性塑料餐盒请归入其他垃圾。"
    },
    paper: {
      title: "纸类投放提示",
      desc: "平整干燥的快递纸壳、书本、报纸可回收，被油污沾染的纸巾、一次性纸餐具不属于可回收物。"
    },
    cardboard: {
      title: "硬纸板投放提示",
      desc: "拆除胶带、压平后捆扎投放，受潮变软的硬纸板请归入其他垃圾。"
    },
    glass: {
      title: "玻璃类投放提示",
      desc: "小心轻放避免破碎，整瓶玻璃容器请清空内容物后投放，破碎玻璃请包好防止伤人。"
    },
    trash: {
      title: "其他垃圾投放提示",
      desc: "难以归类的无利用价值废弃物请投入其他垃圾桶，避免混入可回收物造成污染。"
    }
  }
  

• 第二步：在结果渲染逻辑中匹配内容、按需展示
  逻辑直接嵌入你现有结果页的render方法里，做简单的兼容判断，避免模型结果未返回时组件崩溃：

  render() {
    // 统一转小写做匹配，兼容接口返回值的大小写差异
    const currentCategory = (this.props.result?.category || '').toLowerCase();
    // 从配置中取出当前分类对应的引导内容，匹配不到时返回undefined
    const matchedGuide = MATERIAL_GUIDE[currentCategory];
  
    return (
      <div className="container">
        <div className="row center-div preds">
          <div className="col-12 center-div pred-cat"> Predicted Category: {this.props.result?.category}</div>
          {/* 只有匹配到对应分类的引导内容时，才在页面上渲染 */}
          {matchedGuide && (
            <div className="col-12 center-div material-guide mt-3 p-3 border rounded">
              <h5>{matchedGuide.title}</h5>
              <p className="mb-0">{matchedGuide.desc}</p>
            </div>
          )}
        </div>
        {/* 你原有的概率展示逻辑完全保留即可，不需要改动 */}
        <div className="row center-div probs-outer">
          <div className="col-12 center-div probs-title">
            Probabilities for each class:
          </div>
          <div className="col-12 center-div probs">
            <b>Metal: </b> {this.props.result?.probs?.metal}
          </div>
          <div className="col-12 center-div probs">
            <b>Plastic: </b> {this.props.result?.probs?.plastic}
          </div>
          <div className="col-12 center-div probs">
            <b>Cardboard: </b>{this.props.result?.probs?.cardboard}
          </div>
          <div className="col-12 center-div probs">
            <b>Paper: </b>{this.props.result?.probs?.paper}
          </div>
          <div className="col-12 center-div probs">
            <b>Glass: </b> {this.props.result?.probs?.glass}
          </div>
          <div className="col-12 center-div probs">
            <b>Trash:</b> {this.props.result?.probs?.trash}
          </div>
        </div>
      </div>
    )
  }
  

方案优势 #

• 零额外依赖：全程只用React原生的条件渲染能力，不需要引入状态管理、第三方UI库，不会给项目增加多余体积
• 维护成本极低：后续要调整文案、新增分类，只需要在MATERIAL_GUIDE配置对象里增减键值对，完全不用碰核心渲染逻辑
• 鲁棒性更强：加了可选链兼容和大小写统一匹配，不会因为接口返回值的格式问题导致页面崩溃
• 可扩展性好：如果后续要给不同材质加专属样式，只需要在配置对象里补个样式类名字段，渲染时直接取值应用即可，不需要写一堆嵌套if-else判断加类名

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