问题描述
我正在尝试在 React Native 中切换模态.平面列表中的每个项目都应该有一个切换选项来打开一个模式.
I am trying to toggle a Modal in react native. Each item in a flatlist should have a toggle option to open a modal.
我收到错误:JSX 表达式必须有一个父元素.
I get the error:JSX expressions must have one parent element.
我试图用谷歌搜索正确的语法,但找不到解决方案.
I have tried to google for the right syntax but can't find a solution.
class CategoriesScreen extends Component {
state = {
modalVisible: false,
};
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
render() {
function Item({ title }) {
return (
<TouchableOpacity style={styles.item} onPress={() => {
this.setModalVisible(true);
}}>
<View>
<Text style={styles.title}>{title}</Text>
</View>
</TouchableOpacity>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{ marginTop: 22 }}>
<View>
<Text>Hello World!</Text>
<TouchableOpacity
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
};
return (
<SafeAreaView style={styles.container}>
<Text style={styles.heading}>Select a category for daily tasks.</Text>
<Text style={styles.subheading}>{`You will receive a daily task in this category.\nLet’s get consistent!`}</Text>
<FlatList
data={DATA}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
numColumns={2}
/>
</SafeAreaView>
);
}
}
我正在尝试为平面列表中的每个项目打开一个独特的模式.
I am trying to get open one unique modal for each item in the flatlist.
推荐答案
您只能返回一个实体.要解决此问题,只需使用 < 在
元素(来自 Item
函数中包围您的返回值.Fragment/>react
包).
You can only return a single entity. To fix this just surround your return in your Item
function with a <Fragment/>
element (from the react
package).
Fragment 可让您对子项列表进行分组,而无需向 DOM 添加额外节点.
可以这样做:
import React, {Fragment} from 'react';
...
function Item({ title }) {
return (
<Fragment>
<TouchableOpacity style={styles.item} onPress={() => {
this.setModalVisible(true);
}}>
<View>
<Text style={styles.title}>{title}</Text>
</View>
</TouchableOpacity>
<Modal
animationType="slide"
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{ marginTop: 22 }}>
<View>
<Text>Hello World!</Text>
<TouchableOpacity
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}>
<Text>Hide Modal</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</Fragment>
)
};
希望这会有所帮助,
这篇关于如何修复 JSX 表达式必须有一个父元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!