反应挂钩-识别“类型”子组件

Question

我正在构建一个REACT应用程序（使用TypeScript），我面临一个问题，该解决方案需要识别不同的REACT子组件的可能性。基本上是这样的：

const RibbonTab: ReactFC<IRibbonTab> = (props) => {
 return <p>{props.header}</p>
}

const Ribbon: ReactFC<IRibbon> = (props) => {
  const ribbonTabs = props.children.ofType<RibbonTab>(); // This is what I'd like to accomplish.

  return <>props.children</>;
}

我已经搜索了一段时间，许多，如果不是所有接受的答案（像这里：只允许反应组件中特定类型的子级），都是使用type.displayName（this.props.children[子级]。type.display名称）。不幸的是，也有人说displayName在生产中可能会缩小，所以我不能依赖它。

我发现的唯一方法是“强制”一个自己的显示名称。基本上，我创建了一个接口IUniqueComponent，然后为每个应该可以识别的组件扩展它。大概是这样的：

interface IUniqueComponent {
  displayNameForIdentification: string;
}

const RibbonTab: ReactFC<IRibbonTab extends IUniqueComponent> = (props) => { ... }
RibbonTab.defaultProps = { displayNameForIdentification: "RibbonTab" }

然后，使用React。儿童对于每个，我可以筛选子项：

React.Children.forEach(props.children, (c) => { 
  if (React.isValidElement(c)) {
    if (c.props.displayNameForIdentification === 'WHAT I WANT') { ... }
  }
})

我不喜欢这个解决方案的事实是，我自己添加了标识符，甚至道具名称，displayNameFor鉴定，也没有被React保存在安全的地方，但它只是一个道具：我不确定开发人员是否覆盖了该道具（好吧，我可以说“永远不要使用displayNameFor标识PROPS”，但我想避免这样做）。

那么，有没有办法识别REACT子组件的类型？

编辑：按照拉梅什的建议，我可以写这样的东西：

React.Children.forEach(props.children, (c) => { 
  if (React.isValidElement(c)) {
    if (c.type.name === 'WHAT I WANT') { ... }
  }
})

但是，TypeScript不喜欢c.type。name，它给了我以下错误，我无法解决它：

类型“string |”（props:any）上不存在属性“name”）=

对这个新人有什么建议吗？

Answer 1

您可以这样做：

{children

和组成部分：

const Tab = (props) => {...}

Tab.displayName = "Tab"

这只是我的示例，它只呈现名称为“Tab”的组件

Answer 2

使用类型。name这将返回函数的名称

import * as React from "react";
import { render } from "react-dom";


class App extends React.Component<{}> {
  public render() {
    return (
      <div>
      </div>
    );
  }
}

const app = <App/>

console.log(app.type.name==="App")

render(app, document.getElementById("root"));