如何在react中封装组件的useState

Question

我有以下示例代码：

export function SomeFormComponent() {
const [alertMessage, setAlertMessage] = useState("");
const [alertTitle, setAlertTitle] = useState("");
const [alertSeverity, setAlertSeverity] = useState("");

//to be called at the result of form result
const setAlert = (title, message, severity) => {
setAlertTitle(title);
setAlertMessage(message);
setAlertSeverity(severity);
}
return (<div>
<FormContents/>
<Alert severity={alertSeverity}>
<AlertTitle>{alertTitle}</AlertTitle>
{alertMessage}
</Alert>
</div>)
}

它是一个带有警报组件的表单，其中显示提取的结果。我的问题是，我在应用程序的每个表单中都重复了这段代码(useState((、setAlert(((。我想知道是否有一种方法可以在不复制代码的情况下做到这一点。

Answer 1

创建一个自定义挂钩和一个附带的组件。钩子提供了一个setAlert()函数和一个可以在组件上展开的alert对象。

useAlert自定义挂钩-您只需要一个带有包含所有值的对象的setState：

const useAlert = () => {
const [alert, setAlert] = useState({ alertMessage: '', alertTitle: '', alertSeverity: '' });

return [
alert,
(alertMessage, alertTitle, alertSeverity) => {
setAlert({ alertMessage, alertTitle, alertSeverity });
}     
]
}

AlertWrapper组件：

const AlertWrapper = ({ alertSeverity, alertTitle, alertMessage }) => (
<Alert severity={alertSeverity}>
<AlertTitle>{alertTitle}</AlertTitle>
{alertMessage}
</Alert>
);

用法：

export function SomeFormComponent() {
const [alert, setAlert] = useAlert();
// use setAlert in your form
return (
<div>
<FormContents/>
<AlertWrapper {...alert} />
</div>
);
}

Answer 2

您可以拥有一个customHook。

const useAlert = () => {
const [alertMessage, setAlertMessage] = useState();
const [alertTitle, setAlertTitle] = useState("");
const [alertSeverity, setAlertSeverity] = useState("");

const setAlert = (title, message, severity) => {
setAlertTitle(title);
setAlertMessage(message);
setAlertSeverity(severity);
}
return [ alertMessage, alertTitle, alertSeverity, setAlert]
}

export function SomeFormComponent() {
const [ message, title, severity, setAlert ] = useAlert();
return (<div>
<FormContents/>
<Alert severity={severity}>
<AlertTitle>{title}</AlertTitle>
{message}
</Alert>
</div>)
}