Question

我希望能够使用两个这样的组件：

<Grid>
  <Grid.Item>A</Grid.Item>
  <Grid.Item>B</Grid.Item>
</Grid>

如何将这些组件导出为可导入的？

Answer 1

您可以将它们导出为：

export const Item () => // render Item code

class Grid extends Component {
  // Component code...
}
Grid.Item = Item
export default Grid;

Answer 2

这正是从Grid包中导出react-semantic-ui的方式

const myComponent = () => // code
const mySubComponent1 = () => // code
const mySubComponent2 = () => // code

myComponent.mySubComponent1 = mySubComponent1;
myComponent.mySubComponent2 = mySubComponent2;

export default myComponent;

Answer 3

您需要导出具有带有组件属性的对象。

import React from 'react';

export default {
  Grid: function Grid() { return <div>grid</div>},
  Item: function Item() { return <li>I am item</li> },
};

// usage
import Components from '..';

<Components.Grid>
  <Components.Item />
</Components.Grid>

导出可导入的模块，例如Grid和Grid.Item

3 个答案: