CODEWITHSUNDEEP
reactjsimportexportes6-class
StevenWang
StevenWang

Reputation: 3816

implement an export and it's sub export in react

I meet opensourced ts library component and its sub components like following pattern:

import {Box} from 'example/box';

//in react
<Box>
   <Box.Left>
      Left
   </Box.Left>
   <Box.Right>
      Right
   </Box.Right>
</Box>

The question is: how can I implement the Box component in jsx?

Upvotes: 0

Views: 59

Answers (1)

Stefan Schmidt
Stefan Schmidt

Reputation: 76

The Box component needs to be the export default of the Box.js file. Left and Right are defined as properties of Box:

import React from 'react';

const Box = ({children = null}) =>
    <div>
        {children}
    </div>;

const Left = ({children = null}) =>
    <div>
        {children}
    </div>;

const Right = ({children = null}) =>
    <div>
        {children}
    </div>;

Box.Left = Left;
Box.Right = Right;

export default Box;

Upvotes: 1

Related Questions