如何在TypeScript中正确传递Props给React组件？报错求助

你遇到的错误根源是React函数组件的参数定义方式不对：

React函数组件接收的是单一的props对象，而不是多个独立参数。你原来的Navbar组件把isDark和toggle拆成了两个独立参数，但在JSX中使用时，你传递的是一个包含这两个属性的对象，TypeScript自然会报类型不兼容的错误。

修复方案有两种，选一种就行： #

方案1：定义Props接口，接收完整props对象

// 先定义组件的props类型
interface NavbarProps {
  isDark: boolean;
  toggle: () => void;
}

// 组件接收props对象
function Navbar(props: NavbarProps) {
  // 可以解构出来方便使用
  const { isDark, toggle } = props;
  // ... 组件逻辑
}

方案2：直接解构props并声明类型

// 直接在参数里解构，同时声明类型
function Navbar({ isDark, toggle }: { isDark: boolean; toggle: () => void }) {
  // 直接使用isDark和toggle即可
  // ... 组件逻辑
}

改完之后，再用<Navbar isDark={someBoolValue} toggle={someFunc} />就不会报错了。

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