Reactjs 类型'；未定义'；不可分配给类型'；（名称：字符串）=>；无效'；

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

这是一行

return React.cloneElement（child，newProps）

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

Menu.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>
    );
  }
}

导出接口菜单{
defaultActiveItem？：字符串；
类名？：字符串；
onClick？：（名称：string）=>从不；
}
类菜单扩展组件{
静态项=菜单项；
状态={
选中：this.props.defaultActiveItem
};
handleMenuClick=（名称：字符串）=>{
这是我的国家({
选定：名称
});
if（this.props.onClick）{
this.props.onClick（name）；
}
};
render（）{
常数{
儿童
类名，
onClick，
defaultActiveItem，
休息
}=这是道具；
const computedClasses=类名（className）；
const childrenWithNewProps=React.Children.map(
儿童
（子级：React.ReactElement）=>{
常数newProps={
handleMenuClick:this.handleMenuClick，
活动：this.state.selected==child.props.name
};
return React.cloneElement（child，newProps）；
}
);
返回(

{childrenWithNewProps}

);
}
}

MenuItem.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;

导出接口项道具{
handleMenuClick？：（名称：string）=>void；
名称：字符串；
活动？：布尔值；
儿童？：任何；
}
const defaultProps={
活动：错误
};
const MenuItem:React.StatelessComponent=({
手语点击，
名称
活跃的，
儿童
休息
}) => {
const computedClasses=类名（styles.menuItem{
[样式.选定]：活动
});
返回(
handleMenuClick&&handleMenuClick（名称）}
{…休息}
>
{儿童}

);
};
MenuItem.defaultProps=defaultProps；
导出默认菜单项；

第42行的错误很明显

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

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

至于不处理tsx文件的codesandbox，请参见。
您是否也可以发布问题中抛出错误的代码？当然，我希望有一个代码sandbox会更好，editedgot it！你有什么建议？我有两个想法，第一。为
newProps
创建新类型。第二个使用了相同的
ItemProp
界面，但我必须手动传播原始道具，cloneElement已经这样做了