我有一个有两个孩子的组件,其中一个是一个按钮,它切换一个状态(modalVisible),它决定另一个孩子,一个模态,是否可见。
我无法在父级和模态子级之间共享开/关状态。我尝试将状态保留在父级中,然后将其作为道具传递给子级,但每次父级状态更改时都不会重新渲染子级。
<CommentsModal visible={modalVisible} />
内部 CommentsModal.js...
import Modal from 'react-native-modal';
...
const CommentsModal = ({visible}) => {
const [modalVisible, setModalVisible] = useState(visible);
...
return <Modal visible={modalVisible} />
}
我考虑将状态完全保留在父级中,而不将其传递给 CommentsModal,如下所示:
function renderModal() {
if (modalVisible) {
return <CommentsModal visible={true} />
} else {
return <View />
}
}
但是我意识到 CommentsModal 中必须有一个状态,因为我需要一个“X”按钮来关闭模式。
我不确定最好的方法是什么......我可以做redux,但因为这些模式的数量是动态的;我不希望我的商店那么复杂。我能想到的唯一方法是将所有模式代码移动到父组件中,然后它们可以轻松共享状态,但这对我来说似乎很脏。有没有人有办法解决吗?