不能将类型“(nodeProps: any, treeProps: any) => JSX.Element”分配给类型“ReactNode”。ts(2322)?

Question

基于AntDesign的Tree组件，想要自定义一个可以左右都有选择器(checkbox)的Tree组件：

import React from 'react';
import { Input, Tree } from 'antd';

interface Props {
  treeData: any[];
  onChange: (checkedKeys: any[]) => void;
}

const CheckableTree: React.FC<Props> = ({ treeData, onChange }) => {
  const renderTreeNode = (nodeProps: any, treeProps: any) => {
    const { key, ...restProps } = nodeProps;
    const title = (
      <>
        {/* 左侧勾选框 */}
       <Input type="checkbox" />
        <span>{nodeProps.title}</span>
        {/* 右侧勾选框 */}
       <Input type="checkbox" />
      </>
    );
    return <Tree.TreeNode {...restProps} title={title} key={key} />;
  };

  const onCheck = (checkedKeys: any[]) => {
    onChange && onChange(checkedKeys);
  };

  return (
    <Tree checkable checkStrictly onCheck={onCheck} treeData={treeData}>
      {renderTreeNode}
    </Tree>
  );
};

export default CheckableTree;

可是报错：

不能将类型“(checkedKeys: any[]) => void”分配给类型“(checked: { checked: Key[]; halfChecked: Key[]; } | Key[], info: CheckInfo<any>) => void”。
  参数“checkedKeys”和“checked” 的类型不兼容。
    不能将类型“{ checked: Key[]; halfChecked: Key[]; } | Key[]”分配给类型“any[]”。
      类型“{ checked: Key[]; halfChecked: Key[]; }”缺少类型“any[]”的以下属性: length, pop, push, concat 及其他 29 项。

不能将类型“(nodeProps: any, treeProps: any) => JSX.Element”分配给类型“ReactNode”。ts(2322)

请问下各位老师这个是什么原因导致的呢？

Answer 1

问题很明确，组件需要ReactNode，你却传递一个函数类型下去，就出现错误了。

解决方案：改成函数调用的方式

{renderTreeNode(参数)}