关闭指定模态的一个函数

Question

我的jsx文件中有很多模态，所以，我认为我需要创建一个带有if条件的函数来关闭指定的模态：

像这样：

toggleModal = () => {
if(d){
this.setState({
modalIsOpen:{
Modal1: !this.state.modalIsOpen.Modal1,
}
});
}
if(d){
this.setState({
modalIsOpen:{
Modal2: !this.state.modalIsOpen.Modal2,
}
});
}
console.log('click modal');
};

好的，现在，我不知道传递给什么条件，如果条件让它知道打开/关闭哪个模态。

Answer 1

漂亮整洁，只需要输入模态的名称：

const handleCloseModal = name => {
this.setState(prevState => ({
modalIsOpen: {
...prevState.modalIsOpen,
[name]: !prevState.modalIsOpen[name]
}
}));
}

这样称呼它：

this.handleCloseModal('Modal1')

Answer 2

为什么不创建一个以模态名称为参数的函数？

toggleModal = (modalName) => {
const newState = {modalIsOpen: {}};
newState.modalIsOpen[modalName] = !this.state.modalIsOpen[modalName];
this.setState(newState);
console.log('click modal');
};
...
toggleModal('Modal1');