这篇博客介绍了如何封装和使用Ant Design的Button和Tabs组件。首先展示了DsButton组件的实现，它接收children属性并返回。然后详细讲解了DsTabs组件的创建，包括遍历children属性以构建TabPane，并提供了回调函数。DsTabs组件可以接受嵌套的Panel组件，并展示其内容。
简单组件
import React from "react";
import { Button } from "antd";
const DsButton = ({ children, ...res }) => {children};
export default DsButton;
使用
import DsButton from "./components/Button";
Button111
嵌套组件Tabs
import { Tabs } from 'antd';
const { TabPane } = Tabs;
function callback(key) {
console.log(key);
}
const Demo = () => (
Content of Tab Pane 1
Content of Tab Pane 2
);
ReactDOM.render(, 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 (
{children.map((v, k) => {
const { children, title, ...res } = v.props;
if (v.type === "panel")
return (
//必须有key, callback(key)
{children}
);
})}
);
};
export default DsTabs;
使用
import DsTabs from "./components/DsTabs";
Content of Tab Pane 1
Button111
Content of Tab Pane 2
props
扫一扫
1649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
