类型 'undefined' 不能分配给类型 '(name: string) => void'

Question

我正在尝试学习 Typescript，这是我创建的一个 Menu 组件，但是我无法弄清楚它们在 menu.tsx 行中显示的错误。 42

这是行return React.cloneElement(child, newProps);

如果有人能指出我，我将不胜感激

菜单.tsx

export interface MenuProps {
  defaultActiveItem?: string;
  className?: string;
  onClick?: (name: string) => never;
}

class Menu extends Component<MenuProps> {
  static Item = MenuItem;
  state = {
    selected: this.props.defaultActiveItem
  };

  handleMenuClick = (name: string) => {
    this.setState({
      selected: name
    });
    if (this.props.onClick) {
      this.props.onClick(name);
    }
  };

  render() {
    const {
      children,
      className,
      onClick,
      defaultActiveItem,
      ...rest
    } = this.props;
    const computedClasses = classnames(className);
    const childrenWithNewProps = React.Children.map(
      children,
      (child: React.ReactElement<ItemProps>) => {
        const newProps = {
          handleMenuClick: this.handleMenuClick,
          active: this.state.selected === child.props.name
        };
        return React.cloneElement(child, newProps);
      }
    );
    return (
      <ul className={computedClasses} {...rest}>
        {childrenWithNewProps}
      </ul>
    );
  }
}

菜单项.tsx

export interface ItemProps {
  handleMenuClick?: (name: string) => void;
  name: string;
  active?: boolean;
  children?: any;
}

const defaultProps = {
  active: false
};

const MenuItem: React.StatelessComponent<ItemProps> = ({
  handleMenuClick,
  name,
  active,
  children,
  ...rest
}) => {
  const computedClasses = classnames(styles.menuItem, {
    [styles.selected]: active
  });

  return (
    <li
      className={computedClasses}
      onClick={() => handleMenuClick && handleMenuClick(name)}
      {...rest}
    >
      {children}
    </li>
  );
};

MenuItem.defaultProps = defaultProps;
export default MenuItem;

https://codesandbox.io/s/n4lvv0m2vl

Answer 1

第 42 行的错误非常明显。

export interface ItemProps {
  handleMenuClick?: (name: string) => void;
  name: string;
  active?: boolean;
  children?: any;
}

在界面中，您已将handleMenuClick定义为可选（通过在名称末尾添加“?”）。 cloneElement要求handleMenuClick不是可选的。

至于codesandbox不处理tsx文件，请看github上的这个问题。