javascript - React Hook - 识别 "typeof"子组件

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</>;
}

我已经搜索了一段时间，许多(如果不是全部)接受的答案(例如: only allow children of a specific type in a react component )将使用 type.displayName (this.props. child [ child ].type.displayName)。不幸的是，也有人说 displayName 在生产中可能会被缩小，所以我不能依赖它。

我发现的唯一方法是“强制”使用自己的显示名称。基本上，我创建一个接口(interface) IUniqueComponent，然后为每个应该可识别的组件扩展它。像这样的事情:

interface IUniqueComponent {
  displayNameForIdentification: string;
}

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

然后，使用 React.Children.forEach，我可以过滤子项:

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

我不喜欢这个解决方案的是，我自己添加了标识符，甚至 props 名称 displayNameForIdentification 也没有被 React 保存在安全的地方，但它是只是一个 Prop :我不确定开发人员是否会覆盖该 Prop (好吧，我只能说“永远不要使用 displayNameForIdentification PROPS”，但我想避免这种情况)。

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

<小时/>

编辑:按照Ramesh的建议，我可以写这样的东西:

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

虽然 TypeScript 不喜欢 c.type.name，但它给了我以下错误，而且我无法解决它:

Property 'name' does not exist on type 'string | ((props: any) => ReactElement Component)>) | (new (props: any) => Component)'. Property 'name' does not exist on type 'string'.ts(2339)

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

Answer 1

使用type.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"));