ReactJS/Typescript：子项的类型和属性答案

【问题标题】：ReactJS/Typescript : Typing and properties of childrenReactJS/Typescript：子项的类型和属性
【发布时间】：2023-03-06 04:47:01
【问题描述】：

我有一个组件，它是一个网格 ()。在这个网格中，后者可以有孩子，他们也是我创建的组件。我想知道是否有可能：

仅当我的组件用作我的网格的子组件时才向我的组件添加属性？
限制可以在我的网格中用作子组件的组件（例如，只能使用组件）？

非常感谢

【问题讨论】：

标签： reactjs typescript react-tsx

【解决方案1】：

您可以使用React.Children 和React.cloneElement 进一步操作儿童道具

示例

interface ChildProps {
  value: string;
}

interface GridProps<T = ChildProps> {
  children: React.ReactElement<T> 
    | React.ReactElement<T>[] 
    | React.SFC<T> 
    | React.SFC<T>[]
}

const Grid: React.SFC<GridProps> = ({children}) => {
  return <>{React.Children.map(children, (child: any, index) => {
    const name: string = child.displayName 
      || child.name 
      || (child.type || {}).displayName 
      || 'Component';

    if(name === "Child") {
      return null;
    }

    return child;
  })}</>
}

const Child: React.SFC<ChildProps> = ({value}) => {
  return <div>
    {value}
  </div>
}

Child.displayName = "Child";


class App extends React.Component<{}, []> {


  public render() {

    return (
      <div>
        <Grid>
          <Child value={"Test 1"}/>
          <Child value={"Test 2"}/>
        </Grid>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

如您所见，父组件决定了传递和渲染的内容。

【讨论】：

谢谢@Józef Podlecki。不能强制限制是我的孩子的新属性在我的主要组件的属性的定义级别？在儿童地图中，儿童无法识别 type 属性，因为似乎 child 是 any 类型。
第一个问题没看懂。关于map 中的child 对象，它可以是child.type.displayName、child.displayName、child.name 之一。这取决于组件类型以及是否首先定义
在我的第一个问题中，我想知道我们是否可以将子组件的类型强制定义为父组件的属性（React.Component）。关于您的解决方案，当我尝试获取 child.type.name 时，Typescript 告诉我 child 是 any 类型。所以他不希望我打电话给 child.type.name。我必须投射对象，但是什么类型？
更新了答案。您必须将孩子投射到any
感谢您的更新，我能够有效地恢复名称。只是最后一件小事，然后我将结束这个主题。仅在运行时检查子项的类型。在通过 Visual Studio Code 等编辑器的验证或 ReactJS / Typescript 文件的“编译”期间进行编码时无法进行控制？