模仿antd 组合组件写法 使用

coms.js文件

import React, { forwardRef } from "react";

function part1() {

  return <div>part1</div>;

}

function part2() {

  return <div>part2</div>;

}

function part3() {

  return <div>part3</div>;

}

const coms = forwardRef((props) => {

  return <div>coms组合组件 模仿antd coms.part1写法封装{props.children}</div>;

});

const comsList = coms;

comsList.part1 = part1;

comsList.part2 = part2;

comsList.part3 = part3;

export default comsList;

父组件使用：

import Coms from "./coms";

          <Coms>

            <Coms.part1></Coms.part1>

            <Coms.part2></Coms.part2>

            <Coms.part3></Coms.part3>

          </Coms>

渲染结果：