1

I have a component which is a grid (). In this grid, the latter can have children who are also components that I created. I would like to know if it is possible to:

  • Add properties to my components only if they are used as a child component of my grid ?
  • Restrict the components that can be used as a child in my grid (for example being able to use only components) ?

Thank you so much

Answerrer
  • 2,803
  • 4
  • 8
  • 18

1 Answers1

2

You can manipulate children props further with React.Children and React.cloneElement

Example

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

As you can see parent component kind of decides what to pass and render.

Józef Podlecki
  • 10,453
  • 5
  • 24
  • 50
  • Thanks @Józef Podlecki. It is not possible to force the restriction is the new properties of my children at the level of the definition of the properties of my main component ? In the map on children, the type property is not recognized on child, because it would seem that child is of type any. – Answerrer May 27 '20 at 13:17
  • I don't understand the first question. Regarding `child` object in `map` it can be one of these `child.type.displayName`, `child.displayName`, `child.name`. It depends on the component type and if it is defined in the first place – Józef Podlecki May 27 '20 at 14:39
  • In my first question, I wanted to know if we can force the type of the child to the definition of the properties of the parent component (React.Component). Regarding your solution, when I try to get child.type.name, Typescript tells me that child is of type any. So he doesn't want me to call child.type.name. I have to cast the object, but what type? – Answerrer May 27 '20 at 15:22
  • Updated answer. You have to cast child to `any` – Józef Podlecki May 27 '20 at 16:30
  • Thanks to your update, I was able to effectively recover the name. Just one last little thing and then I will close this subject. The type of the child is checked only at runtime. It is not possible to do the control when coding via the validation of an editor such as Visual Studio Code or during the "compilation" of ReactJS / Typescript files ? – Answerrer May 28 '20 at 07:05
  • Unfortunately you cannot do it as every `` component is of type `JSX.Element` which inherits from `React.ReactElement` so information is lost basically – Józef Podlecki May 28 '20 at 09:48
  • Ok I take note. Thank you very much, I will try to do with all of the information provided. Thank you – Answerrer May 28 '20 at 11:51