实施出口，它是反应中的子出口

Question

我遇到了如下模式的开源 ts 库组件及其子组件：

import {Box} from 'example/box';

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

问题是：如何在 jsx 中实现 Box 组件？

Answer 1

Box 组件需要是 Box.js 文件的 export default。 Left 和 Right 被定义为 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;

实施出口，它是反应中的子出口

implement an export and it's sub export in react

reactjs

import

export

es6-class