单击React组件

Question

基本上我已经创建了一个看起来像这样的按钮组件：

import React from "react";
import styles from "./button.module.scss";
const Button = ({ icon, text, align, bgcolor }) => {
const btnStyle = {
justifySelf: align,
};
return (
<>
<div className={"btn " + bgcolor} style={btnStyle}>
<i className={icon}></i> {text}
</div>
</>
);
};
export default Button;

在我的应用程序中，我可以通过以下方式调用它：

<Button
icon="fa-light fa-trash"
text="Some text"
align="end"
bgcolor="yellow"
></Button>

然而，与此同时，我希望有一个类似于以下内容的onclick事件：

<div onClick={() => setState(!state)}>Click me</div>

如何做到这一点？

Answer 1

编写一个可以作为道具传递给Button组件的函数：

const function=()=>{
setState(!state)
}
<Button
icon="fa-light fa-trash"
text="Some text"
align="end"
bgcolor="yellow"
function={function}
></Button>

并像这样在内部使用：

const Button = ({ icon, text, align, bgcolor, function }) => {
const btnStyle = {
justifySelf: align,
};
return (
<>
<div onClick={function} className={"btn " + bgcolor} style={btnStyle}>
<i className={icon}></i> {text}
</div>
</>
);
};