React+Tailwind实现按钮外侧红色箭头的方案求助

你的箭头显示问题核心出在SVG viewBox不匹配、箭头未按需显示、定位逻辑偏差三个点上，直接给你落地的修改方案：

1. 修复SVG显示问题 #

你当前SVG的viewBox="0 0 30 4"范围过小，但path坐标（比如y1="12"）远超这个区域，导致图形被完全裁剪。先把viewBox调整为能容纳箭头的范围，比如0 0 30 24，如果有设计稿提供的完整SVG，直接用设计稿的代码更稳妥。

2. 只渲染激活按钮的箭头 #

现在每个按钮都对应一个箭头，应该只在按钮处于激活状态时显示箭头，其余隐藏。

3. 调整箭头定位与样式 #

让箭头对齐按钮的垂直中间，定位到右侧边框外侧，同时设置红色样式，去掉无用的占位符<p>。

修改后的完整代码（重点看箭头部分） #

import { useState } from 'react';
import Heading from '../Heading/Heading';
import DiscoveryButton from '../DiscoveryButton/DiscoveryButton';
import { responses } from './discoveryResponses';
import { buttonNames } from '../DiscoveryButton/buttonNames';
import './DiscoveryResponse.css';

// 如果有设计稿的SVG文件，推荐直接导入使用
// import ActiveArrow from './arrow-red.svg';

const DiscoveryResponse = () => {
  const [activeResponse, setActiveResponse] = useState(0);

  const handleButtonClick = (index) => {
    setActiveResponse(index);
  };

  return (
    <section className="py-12 px-4 md:px-40">
      <div className="text-center pt-4 pb-8">
        <Heading title="Discovery Response Generator (Discovery Workflow)" titleFirst={true} />
      </div>

      <div className="grid grid-cols-1 md:grid-cols-[30%_35%_35%] py-10 gap-10">
        {/* Left Side (Image Display) */}
        <div className="hidden md:block">
          <img
            src={responses[activeResponse].image}
            alt="Feature"
            className="w-full h-auto border-2 border-l-0 border-black p-0 m-0"
          />
        </div>

        {/* Center (Text Display) */}
        <div className="flex items-center justify-center border-2 border-gray-200 rounded-2xl">
          <div className="overflow-auto" style={{ maxHeight: '400px' }}>
            <h1 className="text-lg p-4">{buttonNames[activeResponse]}</h1>
            <p className="text-lg p-4">{responses[activeResponse].text}</p>
          </div>
        </div>

        {/* Right Side (Buttons and Navigation) */}
        <div className="grid grid-cols-[80%_20%] gap-4">
          {/* Button Grid */}
          <div className="grid grid-cols-1 items-start border-2 space-y-4">
            {responses.map((response, index) => (
              <DiscoveryButton
                key={index}
                index={index}
                active={activeResponse === index}
                onClick={handleButtonClick}
              />
            ))}
          </div>

          {/* Navigation Arrows - 修改后的部分 */}
          <div className="grid grid-cols-1 border-r-2 border-black items-stretch">
            {responses.map((response, index) => (
              <div key={index} className="flex items-center justify-center relative">
                {/* 仅激活状态显示箭头 */}
                {activeResponse === index && (
                  <svg
                    className="absolute left-0 transform -translate-x-1/2 text-red-600"
                    width="34"
                    height="34"
                    viewBox="0 0 30 24" // 修复viewBox范围
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M16 12l6 6 1.4-1.4L18.8 12 23.4 7.4 21 6l-6 6z"
                      fill="currentColor"
                    />
                    <line
                      x1="30"
                      y1="12"
                      x2="16"
                      y2="12"
                      stroke="currentColor"
                      strokeWidth="2"
                    />
                  </svg>
                  {/* 如果用导入的SVG文件，替换上面的svg标签：
                  <img 
                    src={ActiveArrow} 
                    alt="Active indicator" 
                    className="absolute left-0 transform -translate-x-1/2" 
                  />
                  */}
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default DiscoveryResponse;

修改说明 #

• 将箭头容器的items-start改为items-stretch，确保每个箭头容器高度和对应按钮一致，箭头垂直居中。
• 用activeResponse === index做条件判断，只渲染当前激活按钮的箭头。
• 调整transform -translate-x-1/2，让箭头刚好卡在右侧边框的外侧中间位置。
• 用text-red-600设置箭头红色，可根据设计稿替换为具体色值（比如text-red-500或自定义色值）。

内容的提问来源于stack exchange，提问作者Muhammad Omer Baig