import React from 'react';
import styled from 'styled-components';
// 创建带样式的按钮组件
const StyledButton = styled.button`
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文本 */
padding: 15px 32px; /* 内边距 */
text-align: center; /* 居中文本 */
text-decoration: none; /* 无文本装饰 */
display: inline-block; /* 行内块显示 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 手形鼠标光标 */
`;
// 高阶组件，用于处理点击事件
const withClickHandler = (WrappedComponent) => {
return class extends React.Component {
handleClick = () => {
console.log('按钮被点击');
// 这里可以添加点击后的处理逻辑
}
render() {
const props = { ...this.props, handleClick: this.handleClick };
return <WrappedComponent {...props} />;
}
};
};
// 使用高阶组件和样式化组件
const ButtonWithClickHandler = withClickHandler(StyledButton);
export default () => <ButtonWithClickHandler onClick={() => console.log('点击事件触发')}>点我</ButtonWithClickHandler>;这个例子展示了如何结合使用高阶组件和CSS-in-JS库（例如styled-components）来创建一个带有点击事件处理逻辑的按钮组件。withClickHandler是一个高阶组件，它封装了点击事件的处理逻辑，而StyledButton是一个使用styled-components定义样式的按钮组件。最后，我们导出了一个结合了两者的ButtonWithClickHandler组件，可以直接在应用中使用。