要保留 Semantic UI React 标签的形状,可以使用React.cloneElement
方法来克隆标签,并添加新的属性。
下面是一个示例代码:
import React from 'react';
import { Button } from 'semantic-ui-react';
const ButtonWrapper = ({ shape, children }) => {
// 克隆 Button 标签,并添加新的属性
const clonedButton = React.cloneElement(children, { shape });
return (
{/* 原始 Button 标签 */}
{children}
{/* 克隆的 Button 标签 */}
{clonedButton}
);
};
const App = () => {
return (
);
};
export default App;
在上面的示例中,ButtonWrapper
组件接受shape
属性,并通过React.cloneElement
方法克隆了Button
标签,并添加了shape
属性。最后,我们在App
组件中使用ButtonWrapper
组件包裹Button
标签,并传递shape="circular"
属性。
这样,我们就能够保留原始的Button
标签形状,并通过克隆的Button
标签来修改形状。