Reactjs 将子级传递给Typescript中的专用React组件

我有一个如下代码：

import * as React from "react";
import "./styles.css";
import { Tooltip, Button } from "@material-ui/core";

export default function App() {
  return (
    <>
      <Tooltip title="Same text" arrow>
        <Button>One</Button>
      </Tooltip>
      <Tooltip title="Same text" arrow>
        <Button>Two</Button>
      </Tooltip>
    </>
  );
}

import * as React from "react";
import "./styles.css";
import { Tooltip, Button } from "@material-ui/core";

function MyTooltip(child: JSX.Element) {
  return (<Tooltip title="Same text" arrow>{child}</Tooltip>);
}

export default function App() {
  return (
    <>
      <MyTooltip>
        <Button>One</Button>
      </MyTooltip>
      <MyTooltip>
        <Button>Two</Button>
      </MyTooltip>
    </>
  );
}

import*as React from“React”；
导入“/styles.css”；
从“@material ui/core”导入{Tooltip，Button}”；
导出默认函数App（）{
返回(
一个
两个
);
}

由于两个工具提示的属性完全相同，但子项不同，因此我想定义一个组件并将代码重写为如下内容：

import * as React from "react";
import "./styles.css";
import { Tooltip, Button } from "@material-ui/core";

export default function App() {
  return (
    <>
      <Tooltip title="Same text" arrow>
        <Button>One</Button>
      </Tooltip>
      <Tooltip title="Same text" arrow>
        <Button>Two</Button>
      </Tooltip>
    </>
  );
}

import * as React from "react";
import "./styles.css";
import { Tooltip, Button } from "@material-ui/core";

function MyTooltip(child: JSX.Element) {
  return (<Tooltip title="Same text" arrow>{child}</Tooltip>);
}

export default function App() {
  return (
    <>
      <MyTooltip>
        <Button>One</Button>
      </MyTooltip>
      <MyTooltip>
        <Button>Two</Button>
      </MyTooltip>
    </>
  );
}

import*as React from“React”；
导入“/styles.css”；
从“@material ui/core”导入{Tooltip，Button}”；
函数MyTooltip（子级：JSX.Element）{
返回（{child}）；
}
导出默认函数App（）{
返回(
一个
两个
);
}

但这会导致编译错误：

类型“{children:Element；}”缺少类型“Element”中的以下属性：类型、道具、键（2739）

，我无法修复这些属性。

接口MyTooltipProps{
子元素：JSX.Element；
}
const MyTooltip:React.FC=（{children}）=>{
返回(
{儿童}
);
};

接口MyTooltipProps{
子元素：JSX.Element；
}
const MyTooltip:React.FC=（{children}）=>{
返回(
{儿童}
);
};

找到了一种很好的方法（defaultProps），它还允许覆盖MyTooltip上的任何工具提示属性：

import * as React from "react";
import "./styles.css";
import { Tooltip, Button, TooltipProps } from "@material-ui/core";

function MyTooltip(props: TooltipProps) {
  return <Tooltip {...props} />;
};

MyTooltip.defaultProps = {
  title: "Same text",
  arrow: true
}

export default function App() {
  return (
    <>
      <MyTooltip arrow={false}>
        <Button>One</Button>
      </MyTooltip>
      <MyTooltip title="Overriden text">
        <Button>Two</Button>
      </MyTooltip>
    </>
  );
}

import*as React from“React”；
导入“/styles.css”；
从“@material ui/core”导入{Tooltip，Button，TooltipProps}；
函数MyTooltip（道具：ToolTipps）{
返回；
};
MyTooltip.defaultProps={
标题：“同一文本”，
阿罗：没错
}
导出默认函数App（）{
返回(
一个
两个
);
}

找到了一种很好的方法（defaultProps），它还允许覆盖MyTooltip上的任何工具提示属性：

import * as React from "react";
import "./styles.css";
import { Tooltip, Button, TooltipProps } from "@material-ui/core";

function MyTooltip(props: TooltipProps) {
  return <Tooltip {...props} />;
};

MyTooltip.defaultProps = {
  title: "Same text",
  arrow: true
}

export default function App() {
  return (
    <>
      <MyTooltip arrow={false}>
        <Button>One</Button>
      </MyTooltip>
      <MyTooltip title="Overriden text">
        <Button>Two</Button>
      </MyTooltip>
    </>
  );
}

import*as React from“React”；
导入“/styles.css”；
从“@material ui/core”导入{Tooltip，Button，TooltipProps}；
函数MyTooltip（道具：ToolTipps）{
返回；
};
MyTooltip.defaultProps={
标题：“同一文本”，
阿罗：没错
}
导出默认函数App（）{
返回(
一个
两个
);
}

---

是的，我在问题中链接了同一篇文章：）您的解决方案在JS中有效，但在TS中无效。标记您的答案已被接受，因为它有其优点（消费者不能覆盖标题和箭头，这可能是一件好事）。是的，我在我的问题中链接了同一篇文章：）您的解决方案在JS中有效，但在TS中无效。标记您的答案已被接受，因为它有其好处（消费者不能覆盖标题和箭头，这可能是一件好事）。