React条件渲染div求助：根据表单输入数值展示对应三角形组件

核心思路：通过状态管理用户输入的数值，根据数值所在区间判断渲染对应的三角形组件，用CSS实现三角形样式。

完整可运行示例 #

import { useState } from 'react';

function TriangleRenderer() {
  // 管理输入框原始值与解析后的有效数值
  const [inputValue, setInputValue] = useState('');
  const [validNumber, setValidNumber] = useState(null);

  // 处理输入变化并验证数值有效性
  const handleInputChange = (e) => {
    const rawValue = e.target.value;
    setInputValue(rawValue);
    const parsedNum = Number(rawValue);
    // 只保留0-100的有效数字（支持整数/小数）
    if (!isNaN(parsedNum) && parsedNum >= 0 && parsedNum <= 100) {
      setValidNumber(parsedNum);
    } else {
      setValidNumber(null);
    }
  };

  // 根据数值区间返回对应三角形组件
  const renderTriangle = () => {
    if (validNumber === null) {
      return <div className="tip">请输入0-100之间的有效数字</div>;
    }
    if (validNumber <= 30) {
      return <div className="triangle triangle-red"></div>;
    } else if (validNumber <= 60) {
      return <div className="triangle triangle-yellow"></div>;
    } else {
      return <div className="triangle triangle-green"></div>;
    }
  };

  return (
    <div className="wrapper">
      <input
        type="number"
        value={inputValue}
        onChange={handleInputChange}
        min="0"
        max="100"
        step="0.1"
        placeholder="输入0-100的数值"
      />
      <div className="triangle-box">
        {renderTriangle()}
      </div>
    </div>
  );
}

/* 配套CSS样式 */
/*
.wrapper {
  padding: 20px;
}

input {
  padding: 8px 12px;
  width: 180px;
  margin-bottom: 24px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.tip {
  color: #999;
  font-size: 14px;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

.triangle-red {
  border-bottom: 110px solid #ff5252;
}

.triangle-yellow {
  border-bottom: 110px solid #ffd600;
}

.triangle-green {
  border-bottom: 110px solid #4caf50;
}
*/

export default TriangleRenderer;

关键细节说明 #

• 状态拆分：用两个useState分别管理输入框原始值和验证后的有效数值，避免非数字输入导致的UI异常
• 输入验证：在输入变化时实时校验数值范围，无效时返回提示文本，提升用户体验
• 条件渲染逻辑：将渲染逻辑抽成独立函数renderTriangle，让JSX结构更简洁，新手更容易理解
• 三角形实现：利用CSS边框透明特性绘制三角形，通过不同类名区分区间对应的样式

可选优化 #

• 若只需要整数输入，可移除step="0.1"并将Number()改为parseInt()
• 可添加提交按钮，点击后再触发数值校验与渲染
• 用switch语句替代if-else，适合更复杂的区间判断场景

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