在 React TypeScript 项目中，将布尔值直接传给期望接收状态更新函数（如 (val: boolean) => void）的 prop 会导致类型错误，正确做法是通过 props 传递初始值，并在组件内用 useState(initialValue) 初始化状态。
在 react typescript 项目中，将布尔值直接传给期望接收状态更新函数（如 `(val: boolean) => void`）的 prop 会导致类型错误，正确做法是通过 props 传递初始值，并在组件内用 `usestate(initialvalue)` 初始化状态。
该错误（Type 'boolean' is not assignable to type '(editMode: boolean) => void'）本质是类型混淆：你误将一个布尔值（如 true 或 false）赋给了本应接收 setEditMode 状态设置函数的 prop，而 TypeScript 严格校验后拒绝了这一不匹配的赋值。
例如，若你在 index.tsx 中这样渲染：
root.render(
<React.StrictMode>
<App editMode={false} /> {/* ❌ 错误：把 boolean 当作函数传入 */}
</React.StrictMode>
);而 App 组件的 editMode prop 类型被定义为 React.Dispatch<React.SetStateAction<boolean>>（即 setEditMode 函数），TS 自然报错——boolean 无法赋值给函数类型。
✅ 正确解法是分离“状态值”与“状态设置函数”：
- 用 initialEditMode（或类似命名）prop 传递初始状态值（boolean）；
- 在 App 内部使用 useState(initialEditMode) 创建受控状态；
- 需要修改时，调用 setEditMode(true/false) 或封装逻辑函数（如 openEditMode）。
完整修正示例：
// index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const root = createRoot(document.getElementById("root")!);
root.render(
<React.StrictMode>
<App initialEditMode={false} /> {/* ✅ 传递初始值，非 setter 函数 */}
</React.StrictMode>
);// App.tsx
import React, { useState } from "react";
interface Props {
initialEditMode: boolean;
}
export default function App({ initialEditMode }: Props) {
const [editMode, setEditMode] = useState(initialEditMode);
const openEditMode = () => setEditMode(true);
const closeEditMode = () => setEditMode(false);
return (
<div>
{editMode ? (
<div>
<p>当前处于编辑模式</p>
<button onClick={closeEditMode}>退出编辑</button>
</div>
) : (
<div onClick={openEditMode} style={{ cursor: "pointer", color: "#007bff" }}>
? 点击进入编辑模式
</div>
)}
</div>
);
}⚠️ 注意事项：
- 不要将 useState 的返回值（数组 [state, setState]）直接解构并作为 props 透传给子组件，除非子组件明确需要 setter 函数；
- Prop 命名建议语义清晰：initialXXX 表示初始值，onXXXChange 表示回调，避免使用模糊名称如 editMode 同时承载值和函数；
- 若需跨层级控制状态，可结合 useContext 或状态提升（Lifting State Up），而非强行穿透 setter。
掌握 useState 的初始化机制与 props 类型契约，是规避此类 TS 类型错误的关键。
