- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个带有嵌套数组的 json 响应。我正在使用 Accordion-Collapse-react-native
库以在 UI 中显示此数组。
{
"accountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
"accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
"accountLocationTypeCode": "LOCATION",
"locationName": "First Location",
"children": [{
"accountLocationUid": "3000b1d7-4da4-45ab-b87c-2d41b867eea0",
"accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
"accountLocationTypeCode": "AREA",
"locationName": "Area 4",
"parentAccountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
"allowAddLocation": true,
"children": [{
"accountLocationUid": "8606de2a-1af0-4e81-ae11-df36000c4809",
"accountUid": "5f5b02a1-beb0-40e8-8553-c62299869dff",
"accountLocationTypeCode": "AREA",
"locationName": "Area 2",
"parentAccountLocationUid": "5f4f8644-f5da-4126-84da-9c35802fd8d4",
"children": []
}]
}
]
}
每个项目都有嵌套数组的子数组。我想要做的是当用户点击任何带有嵌套元素的项目时,它应该是展开的,它工作正常但是这样,展开图标也应该变为折叠。当我试图改变它时,它就会改变它的所有元素。
const collapseView = (locationArray: any): any => {
return locationArray?.map((locationRight: any, index: number) => (
<View key={locationRight?.accountLocationUid}>
<View>
<Collapse>
<CollapseHeader>
<View style={styles.itemRow}>
{/* {locationRight?.children?.length > 0 ? <View><Text>{expanded ? 'Yes' : "No"}</Text></View> : null} */}
{locationRight?.children?.length > 0 ? <Icon style={{ marginLeft: -10 }}
size={24}
color="black"
name={expanded ? "chevron-right" : "chevron-down"} /> : null}
<Text
// onPress={() => setExpand(!expanded)}
numberOfLines={1}
style={styles.locationName}>
{locationRight?.locationName}
</Text>
<PaperButton style={styles.paperButton}
mode='outlined'
color='#263238'
uppercase={false}
onPress={() => handlePermission(locationRight?.accountLocationUid)}>
{_.isUndefined(permission) ? 'Allow' : getPermissionValue(locationRight?.accountLocationUid)}
</PaperButton>
</View>
{/* {console.log("child " + locationRight.locationName + " and size is " + locationRight.children.length)} */}
</CollapseHeader>
<CollapseBody>
<View style={{ marginLeft: 15 }}>
{!_.isNull(JSON.stringify(locationRight?.children) || locationRight.children.length > 0)
&& collapseView(locationRight?.children)}
</View>
</CollapseBody>
</Collapse>
</View>
</View>
))
}
使用下面的代码,我正在尝试更改展开和折叠的图标。
{locationRight?.children?.length > 0 ? <Icon style={{ marginLeft: -5 }}
size={24}
color="black"
name={expanded ? "chevron-right" : "chevron-down"} /> : null}
唯一的问题是,如果我扩展为 true,那么图标会更改每个项目,而不是特定的折叠/展开项目。如何获取特定项目的事件?
最佳答案
我必须保存正在折叠的项目的索引或 ID。所以改变onPress
方法如下,并创建一个新的状态来存储索引!
//ON TOP
const [currentIndex,setCurrentIndex]=useState(0);
// Down on the text component
onPress={() => setCurrentIndex(index)}
并且在渲染时可以使用索引来检查它是展开还是折叠
name={currentIndex === index ? "chevron-right" : "chevron-down"}
关于javascript - react 原生 : How to make change in specific item of ScrollView,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72260944/
这里我试图在 FlatList 中显示一个名为“posts”的数组。 render() { console.log(this.props.posts); return (
这是我的代码: {{day(list)}} {{list.weather[0].description}}
我是 Mahout 的新手,并且仍在使用它。 我的问题是,将 Item-Item 和 User-Item 结合起来是否合适? 我的用例是,一个社交网络应用会尝试根据用户历史数据(优先级较高)为当前用户
下午好, 我按数据库搜索以测试特定类测试,当我放置一个新项目时,如果列表包含该项目。 @Test public void insertAndDeleteTask() throws Interrupte
我有一个关于 ionic 框架的问题,我希望有人能帮助我...我有一个带有“ion-item-right”的 ionic 列表。这一切都可以,按钮在右边。现在我需要其他三个居中的图标,这样我就有了:文
我经常遇到类似下面的代码: if ( items != null) { foreach(T item in items) { //... } } 基本上,if 条件确
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
这个问题已经有答案了: Type mismatch: cannot convert from Item to Item (1 个回答) 已关闭 7 年前。 我很困惑。我无法将外部类的实例变量 Node
我目前正在使用 MUI Grid(但我对替代解决方案持开放态度)并且我想要并排放置两个组件:最右边的组件占 400px宽度和左侧组件占据其余部分。 || || || 当页面宽度缩小时: | | ||
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
public class Document extends Model { ... @ManyToMany public Set accessors; ... } 我想选择访问者包含某个用户的所有文档
我正在使用 selenium webdriver 为单页 Web 应用程序开发一个 Java 框架,使用以下模式:PageObject、SlowLoadableComponent(责任链)、PageF
最近在学习C,在网上发现了一个问题。问题是: What is the problem with this function in terms of memory allocation? What is
我有这个代码 ( -1 ? true : false} /> {genre.item.name}
在ASP.Net中使用DataGrid时真的没有快捷方法吗 (e.Item.ItemType==ListItemType.Item || e.Item.ItemType==ListItemType.A
我正在使用工作流程根据数据和一组要求将大量 pdf 从一个位置复制到其他大坝位置。我正在使用以下代码 Assets damAsset = manager.createAsset(path, is, m
我是 PowerShell 的新手。 我正在尝试自动将 dll 组件从源服务器上的文件夹部署到目标服务器上的多个文件夹。这看起来应该很简单:将组件从源服务器上的源(部署)文件夹复制到目标服务器上的文件
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我的代码: for column_name, column_data in summary_words.iteritems(): if column_name != "summary" and
我是一名优秀的程序员,十分优秀!