Stateless component with nested component property

Question

I want to use component like this:

<Grid>
 <Grid.Column>
  {/*some content*/}
 </Grid.Column>
</Grid>

Grid.tsx

export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
}

const Grid: React.SFC<GridProps> =({ children, ...props }) =>
        <div {...props}>
            {children}
        </div>

export interface GridColumnProps extends React.HTMLAttributes<HTMLDivElement> {
    size: 1 | 2 | 3 | 4,
    centered?: false
}

const Column: React.SFC<GridColumnProps> = ({ children, ...props }) =>
    <div {...props}>
        {children}
    </div>

Grid.Column = Column;

At the last line I have an error "Column doesn't exists on type StatelessComponent|GridProps|

Alekstim · Accepted Answer · 2018-02-19 07:28:35Z

1

You need to define a custom type for Grid one that is both React.SFC<GridColumnProps> and has a property named Column

type GridType = React.SFC<GridProps> & { Column: React.SFC<GridColumnProps> } 
const Grid: GridType =(({ children, ...props }) =>
        <div {...props}>
            {children}
        </div>) as GridType // Use a type assertion as our function does not have the Column Property yet

Grid.Column = Column;

edited Feb 19, 2018 at 7:28

Alekstim

4621 gold badge8 silver badges19 bronze badges

answered Feb 16, 2018 at 9:34

Titian Cernicova-Dragomir

253k37 gold badges466 silver badges396 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Stateless component with nested component property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related