Reactjs 获取类型为'的属性；使用TypeScript时不存在错误

我是TypeScript新手，正在尝试理解如何将我的代码转换为类型。目前，我得到以下错误：

Property 'openMenu' does not exist on type '{ children?: ReactNode; }'
Property 'toggle' does not exist on type '{ children?: ReactNode; }'
Property 'slidein' does not exist on type '{ children?: ReactNode; }'

这是我的代码：

const Menu: FunctionComponent = ({ openMenu, toggle, slidein }) => {
  return (
    <>
      <div className={`menu ${toggle}`} onClick={openMenu}>
        <div className="bar1"></div>
        <div className="bar2"></div>
        <div className="bar3"></div>
      </div>
      <div className={`expand ${slidein}`}>
        <ul>
          <li>
            <Link to="/" onClick={openMenu}>
              List
            </Link>
          </li>
          <li>
            <Link to="/add-user" onClick={openMenu}>
              Add User
            </Link>
          </li>
          <li>Add Climb</li>
        </ul>
      </div>
    </>
  );
};

export default Menu;

---

FunctionComponent

采用通用类型参数

p

，该参数代表

菜单中使用的道具类型。如果未指定
P
，则默认使用
{}
类型。此通用对象类型不指定任何属性类型，因此编译器将不知道
openMenu
、
toggle
和
slidein

您将需要如下指定
菜单
：

// this is just an example. Replace it with your concrete props type
type MenuProps = {
  openMenu(): void;
  toggle: boolean;
  slidein: string;
};

const Menu: FunctionComponent<MenuProps> = ({ openMenu, toggle, slidein }) => {...}

//这只是一个例子。将其替换为混凝土支柱类型
类型MenuProps={
openMenu（）：void；
切换：布尔；
slidein：字符串；
};
常量菜单：FunctionComponent=（{openMenu，toggle，slidein}）=>{…}
FunctionComponent
接受一个通用类型参数
p
，它代表
菜单中使用的道具类型。如果未指定
P
，则默认使用
{}
类型。此通用对象类型不指定任何属性类型，因此编译器将不知道
openMenu
、
toggle
和
slidein

您将需要如下指定
菜单
：

// this is just an example. Replace it with your concrete props type
type MenuProps = {
  openMenu(): void;
  toggle: boolean;
  slidein: string;
};

const Menu: FunctionComponent<MenuProps> = ({ openMenu, toggle, slidein }) => {...}

//这只是一个例子。将其替换为混凝土支柱类型
类型MenuProps={
openMenu（）：void；
切换：布尔；
slidein：字符串；
};
常量菜单：FunctionComponent=（{openMenu，toggle，slidein}）=>{…}
您需要在函数签名中明确定义道具类型，如下所示：

 export const Menu = 

({ openMenu, toggle, slidein }: { 
  openMenu: () => void;
  toggle: boolean;
  slidein: boolean;
}) => {

// rest of your code

}

export default Menu;

更好的是，定义道具的类型并将该类型定义传递到函数中：

type PropTypes = {
  openMenu: () => void;
  toggle: boolean;
  slideIn: boolean;    
}

并将其传递到函数中：

const Menu: FunctionComponent<PropTypes> = ({ openMenu, toggle, slideIn 
}) => {
   ...
}

const菜单：FunctionComponent=（{openMenu，toggle，slideIn
}) => {
...
}

快乐编码！☺️
 您需要在函数签名中明确定义prop类型，如下所示：

 export const Menu = 

({ openMenu, toggle, slidein }: { 
  openMenu: () => void;
  toggle: boolean;
  slidein: boolean;
}) => {

// rest of your code

}

export default Menu;

更好的是，定义道具的类型并将该类型定义传递到函数中：

type PropTypes = {
  openMenu: () => void;
  toggle: boolean;
  slideIn: boolean;    
}

并将其传递到函数中：

const Menu: FunctionComponent<PropTypes> = ({ openMenu, toggle, slideIn 
}) => {
   ...
}

const菜单：FunctionComponent=（{openMenu，toggle，slideIn
}) => {
...
}

快乐编码！☺️
 谢谢，我仍在努力理解这一切，但这确实让我朝着正确的方向前进。请随意提出其他问题。您也可以简单地将上面的示例写成
const-Menu=（{openMenu，toggle，slidein}:MenuProps）=>{…}
或
const-Menu=（props:MenuProps）=>{…}
，内置的
FunctionComponent
只是一个React类型，它向组件添加了特殊的props类型，如
子组件（如果您需要的话）。谢谢，我仍在努力理解这一切，但这确实让我朝着正确的方向前进。请随意提出其他问题。您也可以简单地将上面的示例编写为
const-Menu=（{openMenu，toggle，slidein}:MenuProps）=>{…}
或
const-Menu=（props:MenuProps）=>{…}
，内置的
FunctionComponent
只是一个React类型，它向组件添加了特殊的props类型，如
子类
（如果您需要）。