React滑块故障：图片及Prev按钮无法显示，求解决方案

问题根源梳理 #

• 未加载核心组件：App组件未引入自定义的滑块组件，导致整个滑块功能未被渲染
• 组件命名不规范：自定义组件slider使用小写命名，React会将其识别为普通HTML标签，无法正常解析
• Slide组件无返回值：仅声明img标签但未通过return返回，图片无法渲染
• Controls组件参数不匹配：props定义时拼写错误（setSlidexIndex），与传入的setSlideIndex不对应，导致Prev按钮点击无响应
• Slider组件语法错误：
  • 返回JSX时错误包裹大括号，导致返回对象而非合法JSX元素
  • JSX内部使用//注释，不符合React注释规范（需用{/* ... */}）
  • 末尾div标签闭合错误，写成<div/>而非</div>

修复后的完整代码 #

import "./styles.css";
import { useState } from 'react';

const TIMEOUT = 1000;
const SLIDES = [
  "https://picsum.photos/id/10/300/100",
  "https://picsum.photos/id/20/300/100",
  "https://picsum.photos/id/30/300/100"
];

const Controls = ({ setSlideIndex }) => {
  return (
    <div>
      <button onClick={() => {
        setSlideIndex((curIndex) => {
          return curIndex - 1 < 0 ? SLIDES.length - 1 : curIndex - 1;
        });
      }}>Prev</button>
      <button>Next</button>
      <button>Play</button>
      <button>Stop</button>
    </div>
  );
};

const Slide = ({ slideNumber }) => {
  return <img src={SLIDES[slideNumber]} alt={`Slide ${slideNumber + 1}`} />;
};

const Slider = () => {
  const [slideIndex, setSlideIndex] = useState(0);
  return (
    <div>
      {/* 提升状态供子组件共享 */}
      <Slide slideNumber={slideIndex} />
      <Controls setSlideIndex={setSlideIndex} />
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Slider />
    </div>
  );
}

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