如何将函数作为道具传递给打字稿中的子元素答案

【问题标题】：How to pass function as props to a child element in typescript如何将函数作为道具传递给打字稿中的子元素
【发布时间】：2021-01-08 08:18:26
【问题描述】：

我有一个父导航栏组件。

const Navbar:React.FC = () => {
  const classes = useStyles();

  const [displayDialog, setDisplayDialog] = useState(false);

  function  doSomething(){
    console.log('do something')
  }

  return (
    <AppBar className={classes.background} position="static">
      <Toolbar>
        <Typography className={classes.title}>Labs</Typography>
        <Button onClick={(event: React.MouseEvent<HTMLElement>) => setDisplayDialog(true)} className={classes.loginButton}>Login</Button>
        <SettingsMenu doSomething={DoSomething}/>
         //Error is here ^^
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;

我想要做的是我想将 dosomething 作为函数传递给子元素。主要功能是点击后会有alert或者console.log。

这是错误日志

"message": "Type '{ doSomething: () => void; }' 不可赋值输入'IntrinsicAttributes & IntrinsicClassAttributes & { WrappedComponentRef?: ((instance: SettingsMenu | null) => void) | 参考对象<...> |空 |不明确的; }, 任何, 任何>> & 只读<...> & Readonly<...>'。\n 类型上不存在属性“doSomething” '内在属性 & IntrinsicClassAttributes & { WrappedComponentRef?: ((instance: SettingsMenu | null) => void) | 参考对象<...> |空 |不明确的; }, 任何, 任何>> & 只读<...> & 只读<...>'.",

import React, { Component } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { withRouter } from 'react-router';

type SettingsMenuProps = RouteComponentProps;

type SettingsMenuState = {
  settingsAnchorElement: Element | null;
  currentDialog: null | 'authentication' | 'resetProgress';
  showLoginButton: boolean;
};

type NavbarProps = {
  doSomething: () => void
}

export class SettingsMenu extends Component<
  SettingsMenuProps,
  SettingsMenuState,
  NavbarProps
> {
  constructor(props: any) {
    super(props);
    this.state = {
      settingsAnchorElement: null,
      currentDialog: null,
      showLoginButton: false
    };
  }
  render() {
    return (
     <button onClick={this.props.doSomething}>Do Something</button>
    );
  }
}
export default withRouter(SettingsMenu);

【问题讨论】：

你使用什么样的javascript？ React.js 或 Vue,js 还是什么？请为您的问题添加适当的标签。

标签： javascript reactjs typescript

【解决方案1】：

您在 SettingsMenu 定义中指定了错误的泛型类型。道具的类型应该放在第一个通用参数中。

试试：

type SettingsMenuProps = RouteComponentProps & NavbarProps;

export class SettingsMenu extends Component<
  SettingsMenuProps,
  SettingsMenuState
  > {
  constructor(props: any) {
    super(props);
    this.state = {
      settingsAnchorElement: null,
      currentDialog: null,
      showLoginButton: false
    };
  }

  render() {
    return (
      <button onClick={this.props.doSomething}>Do Something</button>
    );
  }
}

【讨论】：