react antd组件封装

简单组件

import React from "react";
import { Button } from "antd";
const DsButton = ({ children, ...res }) => <Button {...res}>{children}</Button>;
export default DsButton;

使用

import DsButton from "./components/Button";
  <DsButton type="default" onClick={showModal}>
        Button111
      </DsButton>

嵌套组件Tabs

import { Tabs } from 'antd';
const { TabPane } = Tabs;
function callback(key) {
  console.log(key);
}
const Demo = () => (
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">
      Content of Tab Pane 1
    </TabPane>
    <TabPane tab="Tab 2" key="2">
      Content of Tab Pane 2
    </TabPane>
  </Tabs>
);

ReactDOM.render(<Demo />, mountNode);

import React from "react";
import { Tabs } from "antd";
const { TabPane } = Tabs;
const DsTabs = (props) => {
  const { children, ...res } = props;
  console.log("children", props, children);
  return (
    <Tabs {...res}>
      {children.map((v, k) => {
        const { children, title, ...res } = v.props;
        if (v.type === "panel")
          return (
            <TabPane tab={title} {...res} key={k}> //必须有key, callback(key)
              {children}
            </TabPane>
          );
      })}
    </Tabs>
  );
};
export default DsTabs;

使用

import DsTabs from "./components/DsTabs";
 <DsTabs defaultActiveKey="1" onChange={callback}>
        <panel title="Tab 1">
          Content of Tab Pane 1
          <DsButton type="default">Button111</DsButton>
        </panel>
        <panel title="Tab 2">
          Content of Tab Pane 2
        </panel>
      </DsTabs>