如何在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中的任何一个组件中，因为这样一来，数据库中的每个记录都会有一个模态。所以我想我需要把它放在app.js中<ScrollView>的末尾，但我如何从<Child>组件打开和关闭它？我读到过可以使用回调函数将信息向上传递给父组件，但我不确定如何做到这一点，同时也传递包含每个记录信息的道具。

Answer 1

您可以尝试以下逻辑：

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这样的组件来定义模态是非常有用的。