使用渲染道具反应本机创建自定义模态

Question

我想创建一个Modal组件，并且希望有可能向其注入我想要的一切。首先，我决定使用HOC，但是后来我更改了解决方案以渲染道具。一切正常，但我不太喜欢这种解决方案。我想知道如何优化它以使其更好。创建此类模态的最佳实践是什么，您需要在模态组件之外打开此模态的按钮。我真的不喜欢这样，现在我有两个具有模式打开/关闭状态的组件。他们两个都有切换方法来打开/关闭模态。有什么建议吗？也许我应该坚持HOC？

以下是使用CustomModal的Component.js代码：

toggleModalVisibility = (visible) => {
    this.setState({modalVisible: visible});
};

render() {
    const question = this.props.questions[this.props.counter];
    return (
            <View style={styles.questionContainer}>

                <CustomModal
                    visible={this.state.modalVisible}
                    toggleModalVisibility={this.toggleModalVisibility}
                    render={() => (
                        <>
                            <Text>{question.text}</Text>
                            <Text>{question.details}</Text>
                        </>
                    )}
                />
                <View style={styles.questionTextContainer}>
                    <Text style={styles.questionText}>{question.text}</Text>
                    <TouchableOpacity onPress={() => this.toggleModalVisibility(!this.state.modalVisible) }>
                        <FontAwesome5 name='question-circle' size={30} color='#B7DBF3' light />  
                    </TouchableOpacity>                          
                </View>
            </View>
    )
}

这是CustomModal.js的代码

export default class CustomModal extends Component {
constructor(props) {
    super(props);
    this.state = {
        isOpen: this.props.visible
    };
}

componentDidUpdate(prevProps) {
    if (prevProps.visible !== this.props.visible) {
        this.setState({isOpen: this.props.visible});
    }        
}

toggle = (isOpen) => {
    this.setState({ isOpen });
    this.props.toggleModalVisibility(isOpen)
}

render() {
    return (
        <View>
            <Modal
                animationType='slide'
                transparent={false}
                visible={this.state.isOpen}
            >
                <View style={{marginTop: 30, marginLeft: 5}}>            
                    <TouchableHighlight
                        onPress={() => {
                            this.toggle(!this.state.isOpen)
                        }}>
                        <FontAwesome5 name='times-circle' size={30} light />  
                    </TouchableHighlight>
                    <View>{this.props.render()}</View>                      
                </View>
            </Modal>
        </View>
    )
}

}