如何将所有组件逻辑都包含在其中，并将其导出到父组件

Question

我有一个模态组件，用于为用户显示表单。此模态接受三个参数：is_visible(如果显示了模态(、toggleModal(用于管理是否显示模态的状态函数(、passport_id(此处不相关(。该组件用于另一个组件，即下面的passport组件。该passport组件用于创建管理模态可见性的状态，然后，如上所述，将状态函数和状态变量传递给模态(子组件(。

这很好，但将模态的部分功能定义在其父级上似乎是错误的。我认为，控制模态是否显示的状态应该在模态组件内部定义，然后，如果有必要在模态之外使用这些函数，则应该导出它们。我尝试过在模态中定义一个钩子并导出到passport组件，但没有成功，因为模态中的状态变量没有更新。

所以我的问题是，是否有一种合适的方法来应用"；告诉，不要问"(https://martinfowler.com/bliki/TellDontAsk.html)在这里，可以告诉组件做一些事情，而不是传递数据。或者，换句话说，只将模态的逻辑放入模态组件中

模态组件：

const TransferPassportModal = ({is_visible, toggleModal, passport_id}) => {
const [input_text, setInputText] = useState(''),
[loading, setLoading] = useState(false);
function closeModal() {
toggleModal(false);
}
return (
<Modal animationType="fade" transparent={true} visible={is_visible}>
<View style={styles.modal}>
<View style={styles.modal_content}>
<TouchableOpacity
onPress={closeModal}
style={styles.close_modal_button}>
<Icons name="close" size={20} />
</TouchableOpacity>
// Rest of code
</View>
</View>
</Modal>
);
};
export default TransferPassportModal;

Passport组件：

const Passport = ({passport}) => {
const [toggleModal, setToggleModal] = useState(false);
function openModal() {
setToggleModal(!toggleModal);
}
return (
<View style={styles.wrapper}>
<View style={styles.infos_wrapper}>
<Text style={styles.name}>{passport.nome}</Text>
<Text style={styles.text}>{passport.codigo}</Text>
</View>
<View style={styles.buttons_wrapper}>
// Resto of code
<TransferPassportModal
is_visible={toggleModal}
passport_id={passport.ingresso}
toggleModal={setToggleModal}
/>
</View>
</View>
);
};
export default Passport;

Answer 1

我最近这样做：

export const OpenModalAction = () =>{
return (
<>
<Button/>
<Modal> …. <Modal/>
</>
)
}

所以按钮和模态是一个组件