Как создать один модальный компонент, доступный для нескольких компонентов в React Native?

Question

Я новичок в реакции, и мне трудно понять архитектуру моего приложения. Вот что у меня есть: я использую fetch(), чтобы получить массив записей (records) из бэкэнда. Я использую несколько пользовательских компонентов для обработки вывода данных. В конце дерева находится ряд осязаемых компонентов, которые мне нужно открыть при нажатии на один модальный компонент. Вот простая версия кода:

. / App. js

<ScrollView>
    {records.map((record, index) => {
        return <Post key={index} post={record} />
    })}
</ScrollView>

. / Src / components. js

function Post(props) {
    return (
        <Child info={props.post} />
        ...other custom components in here...
    )
}

function Child(props) {
    return (
        <TouchableHighlight onPress={() => ...open modal...}>{props.info}</TouchableHighlight>
    )
}

Итак, я не могу поместить свой <Modal> ни в один из компонентов в components.js, так как тогда я получаю по одному модальному окну для каждой записи в базе данных. Итак, я полагаю, что мне нужно поместить его в конец <ScrollView> в app.js, но тогда как мне открыть и закрыть его из компонента <Child>? Я читал, что можно передать информацию по цепочке родительскому компоненту с помощью функции обратного вызова, но я не уверен, как это сделать, одновременно передавая реквизиты, содержащие информацию о каждой записи.

Answer 1

Вы можете попробовать этот logi c:

const [modalVisible, setModalVisible] = useState(false);

const handleVisibility = () => {
  setModalVisible(!modalVisible)
}
return(
 <View>
  <YourWrappingModalComponent visible={modalVisible} />
   <ScrollView>
    {records.map((record, index) => {
        return <Post 
                 key={index} 
                 post={record} 
                 handleVisibility={handleVisibility} />
                 })}
  </ScrollView>
 </View>
)

Чтобы открыть модальное окно из Child, вы:

function Post(props) {
    return (
        <Child info={props.post} handleParentModal={props. handleVisibility} />
        ...other custom components in here...
    )
}

function Child(props) {
    return (
        <TouchableHighlight onPress={() => props.handleParentModal()}>{props.info}</TouchableHighlight>
    )
}

Используя такой компонент, как YourWrappingModalComponent, где вы определяете ваше модальное окно очень полезно, если вы используете его во многих местах.