如何在React中通过Radio单选按钮实现组件条件渲染

首先修正你现有代码的两处问题，保证单选功能正常：

1. 两个单选框的name属性必须设置为相同值，才能实现互斥选中，当前两个radio的name分别为inPerson和online，无法正常单选，建议统一修改为taskType
2. 标签名拼写错误，应为<label>而非<lable>

实现条件渲染的三种常用方案 #

方案1：三元运算符（适用于两个固定组件切换的场景）

直接在渲染位置根据checked状态判断要渲染的组件即可，修改后的完整代码如下：

import React, { useState } from "react";
import './NewTask.css';
import TaskDetails from "./TaskDetails";
import TaskSetting from "./TaskSetting";

const NewTask = () => {
    const [checked, setChecked] = useState("inPerson");

    return (
        <div className="newtask-div">
            <h3 className="header">New Task</h3>
            <ul className="task-item">
                <li style={{ fontSize: "17px" }}>Select Task Type: </li>
                <li>
                    <input
                        type="radio"
                        checked={checked === "inPerson"}
                        name="taskType" 
                        value="inPerson"
                        onChange={(e) => {
                            setChecked(e.target.value)
                        }}
                    />
                    <label>In Person</label>
                </li>
                <li>
                    <input
                        type="radio"
                        checked={checked === "online"}
                        name="taskType" 
                        value="online"
                        onChange={(e) => {
                            setChecked(e.target.value)
                        }}
                    />
                    <label>Online</label>
                </li>
            </ul>
            {/* 三元判断渲染对应组件 */}
            {checked === 'inPerson' ? <TaskDetails /> : <TaskSetting />}
        </div>
    )
}
export default NewTask

你可以把<TaskSetting />替换为任意你需要在online状态下渲染的组件。

方案2：&&短路运算（适用于选中online时不需要渲染任何内容的场景）

如果选中online状态下不需要展示任何组件，可以直接用短路运算简化写法：

{checked === 'inPerson' && <TaskDetails />}

方案3：对象映射（适用于后续可能新增更多单选选项的场景，扩展性更强）

如果后续还有可能新增其他任务类型的单选选项，可以提前用对象映射的方式维护类型和组件的对应关系，后续新增选项只需要更新映射对象即可，不需要修改渲染逻辑：

import React, { useState } from "react";
import './NewTask.css';
import TaskDetails from "./TaskDetails";
import TaskSetting from "./TaskSetting";
// 比如后续新增了hybrid混合类型的组件
import HybridTask from "./HybridTask";

const NewTask = () => {
    const [checked, setChecked] = useState("inPerson");
    // 维护类型和组件的映射关系
    const TaskComponentMap = {
        inPerson: TaskDetails,
        online: TaskSetting,
        hybrid: HybridTask
    }
    // 动态取当前要渲染的组件
    const RenderComponent = TaskComponentMap[checked];

    return (
        <div className="newtask-div">
            <h3 className="header">New Task</h3>
            <ul className="task-item">
                <li style={{ fontSize: "17px" }}>Select Task Type: </li>
                <li>
                    <input
                        type="radio"
                        checked={checked === "inPerson"}
                        name="taskType" 
                        value="inPerson"
                        onChange={(e) => setChecked(e.target.value)}
                    />
                    <label>In Person</label>
                </li>
                <li>
                    <input
                        type="radio"
                        checked={checked === "online"}
                        name="taskType" 
                        value="online"
                        onChange={(e) => setChecked(e.target.value)}
                    />
                    <label>Online</label>
                </li>
                {/* 新增的混合类型选项 */}
                <li>
                    <input
                        type="radio"
                        checked={checked === "hybrid"}
                        name="taskType" 
                        value="hybrid"
                        onChange={(e) => setChecked(e.target.value)}
                    />
                    <label>Hybrid</label>
                </li>
            </ul>
            {/* 直接渲染动态组件即可 */}
            <RenderComponent />
        </div>
    )
}
export default NewTask

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