reactjs - ReactJS/Typescript：子项的类型和属性

Question

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

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

非常感谢

标签： reactjstypescriptreact-tsx

Answer 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"));

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