我正在使用reactJs构建一个管理模板,构成整个页面的组件之一就像这样。
class UserManagement extends React.Component {
state = {
showDeleteModal: false
};
_toggleDeleteModal = () => {
this.setState(prevState => ({
showDeleteModal: !prevState.showDeleteModal
}));
};
onDeleteRow = () => {
console.log("delete");
};
render() {
return (
<div>
{this.state.showDeleteModal && (
<DeleteModal
title="Delete Data ?"
description="Are you sure you want to delete this data from the system ?"
onDeleteAction={this.onDeleteRow}
onToggleModal={this._toggleDeleteModal}
/>
)}
</div>
);
}
}
DeleteModal
基本上是一个模型弹出并向用户显示一组选项,用户根据这些选项选择一个选项,这是此UserManagement
组件中包含的众多模态之一。正如您所看到的,我需要在渲染函数中写出DeleteModal
代码,对其他模态执行此操作会导致此页面上的多余代码可能以某种方式提取出来。
最后,我希望能够做类似的事情
我没有清楚地得到你的问题,但我希望你问你如何能够提取出DeleteModal
组件。话虽这么说,这是我的想法;
class UserManagement extends React.Component {
state = {
showDeleteModal: false
};
_toggleDeleteModal = () => {
this.setState(prevState => ({
showDeleteModal: !prevState.showDeleteModal
}));
};
onDeleteRow = () => {
console.log("delete");
};
renderDeleteModal = () => (
<DeleteModal
title={"Delete Data ?"}
description={
"Are you sure you want to delete this data from the system ?"
}
onDeleteAction={this.onDeleteRow}
onToggleModal={this._toggleDeleteModal}
/>
);
render() {
return (
<React.Fragment>
{this.state.showDeleteModal && this.renderDeleteModal}
</React.Fragment>
);
}
}
我假设你拥有的所有模态都具有相似的结构,并且因为在任何时候只有一个模态将显示给用户,你可以在具有以下字段的可重用模态上创建:
你可以尝试创建这样的东西:
class UserManagement extends React.Component {
constructor(props) {
this.state = {
showModal: false,
modalTitle: "",
modalDescription: "",
modalAction: null
}
}
showDeleteModal() {
this.setState(prevState => ({
modalTitle: "Delete Data ?",
modalDescription: "Are you sure you want to delete this data from the system ?",
modalAction: this.onDeleteRow
}), this._toggleDeleteModal)
}
_toggleDeleteModal = () => {
this.setState(prevState => ({
showModal: !prevState.showModal
}))
};
onDeleteRow = () => {
console.log("delete");
};
render() {
return (
<div>
{this.state.showModal && (
<Modal
data={this.state.modal}
onToggleModal={this._toggleModal}
/>
)}
</div>
);
}
}
您可以为每个用例(如删除)设置一个特定的功能,用于设置标题,描述等。
如果您认为他们将执行静态操作而没有来自UserManagement组件的输入要求,您可以进一步将我显示的所有代码移动到HOC并将其导入您的UserManagement组件。