React组件切换问题：幻灯片结束后如何渲染新组件

你的核心问题是在点击事件回调里返回组件不会触发React重新渲染，React组件的渲染逻辑必须写在return语句或者被return的JSX结构中，而不是事件处理函数里。下面是两种可行的修改方案：

方案一：用状态控制组件切换 #

新增一个状态变量标记是否完成幻灯片展示，根据这个状态决定渲染哪个组件：

import { useState } from 'react';

const text = [
    "Text1",
    "Text2",
    "Text3",
    "Text4",
    "Text5"
]

export function Intro() {
    const [index, setIndex] = useState(0);
    // 新增状态：标记是否完成所有幻灯片展示
    const [isFinished, setIsFinished] = useState(false);

    const handleIndexIncrease = () => {
        if (index === text.length - 1) {
            // 切换状态触发重新渲染
            setIsFinished(true);
        } else {
            setIndex(prevIndex => prevIndex + 1);
        }
    }

    // 根据状态渲染对应内容
    if (isFinished) {
        return <Test />;
    }

    return (
        <>
            <div className="mainContainer">
                <h1>{text[index]}</h1>
                <button id='btn' onClick={handleIndexIncrease}>&#129046;</button>
            </div>
        </>
    )
}

function Test() {
    return (
        <>
            <div className="mainContainer">
                <h1>Component2</h1>
            </div>
        </>
    )
}

方案二：直接根据index判断渲染 #

不需要额外状态，通过更新index到超出文本数组范围，触发Test组件的渲染：

import { useState } from 'react';

const text = [
    "Text1",
    "Text2",
    "Text3",
    "Text4",
    "Text5"
]

export function Intro() {
    const [index, setIndex] = useState(0);

    const handleIndexIncrease = () => {
        if (index === text.length - 1) {
            // 更新index到超出数组长度，触发渲染Test
            setIndex(text.length);
        } else {
            setIndex(prevIndex => prevIndex + 1);
        }
    }

    // 判断index是否超出范围，渲染对应组件
    if (index >= text.length) {
        return <Test />;
    }

    return (
        <>
            <div className="mainContainer">
                <h1>{text[index]}</h1>
                <button id='btn' onClick={handleIndexIncrease}>&#129046;</button>
            </div>
        </>
    )
}

function Test() {
    return (
        <>
            <div className="mainContainer">
                <h1>Component2</h1>
            </div>
        </>
    )
}

之前写法无效的原因 #

• 事件处理函数里返回<Test/>不会触发组件重新渲染，React只会根据状态或props的变化重新执行组件渲染逻辑。
• 你尝试的状态共享方式错误：Test组件没有被包含在Intro的JSX结构中，即使传递了isActive props，它也不会出现在页面上。

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