实现一个出口，它的子出口在反应中

Question

我遇到了开放源码库组件及其子组件，如下所示：

import {Box} from 'example/box';

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

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

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;