ReactJS/Typescript : children 的类型和属性

Question

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

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

非常感谢

Answer 1

您可以使用 React.Children and 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"));

如您所见，父组件决定传递和呈现的内容。

ReactJS/Typescript : children 的类型和属性

ReactJS/Typescript : Typing and properties of children

typescript

reactjs

react-tsx