使用react遍历对象生成dom

 更新时间:2023年01月17日 08:59:14   作者:apple_2021  
这篇文章主要介绍了使用react遍历对象生成dom问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

react遍历对象生成dom

项目场景

目前有一个需求,是要接收后台返回的一个对象,并且遍历他的属性和值显示到页面上,因为该对象表示的是自定义参数,每一次都不一样,所以记录一下;

问题描述

之前最常用的map是方法是用来遍历数组的。

const arr = [a, b, c]
render(){
  return (
	<div>
	{
		arr.map((item,index)=>{
			return (
			  <div key={index}>{item}</div>
			)
		 })
	}
	</div>
  )
}

那对象的话,怎么遍历呢?

API: Object.keys()

作用:遍历对象中的属性

所以我们可以通过Object.keys(obj)来获取该对象的所有属性,根据这个数组的map方法生成相应的dom节点,代码如下:

const obj = {
	a: [1,2,3],
	b: [4,5,6]
}

Object.keys(obj).map((element,index)=>{
	return (
		<div key={index}>
			<div>{element}</div>
			element.map((item,i)=>{
				return (
					<div key={i}>{item}</div>
				)
			})
		</div>
	)
})

不要着急,继续往下看,还可能遇到个小坑

补充

看下面的代码,看看你能否发现问题

 // field为接口字段,属性个数不确定。
 // 例如: field = { a: "123", model: "text", ... } 
 <Descriptions 
 	title="自定义参数" 
 	size="middle" 
 	labelStyle={{ color:"#999" }} 
 	style={{ overflowY: "auto", maxHight: "160px" }}
 >
	{/* <pre >{JSON.stringify(field,null,2)}</pre> */}
	{
	  Object.keys(field).map((name)=>{
	    return <Descriptions.Item label={name}>{field.name}</Descriptions.Item>
	  })
	}
	</Descriptions>

这段代码在页面展示的时候,只展示属性,那么为什么不展示值呢,这个就得从对象的点和中括号的区别说起了。

下面选自《你不知道的JavaScript(上卷)》

简单的说就是:

  • 中括号法可以用变量作为属性名,而点方法不可以;
  • 中括号法可以用数字作为属性名,而点语法不可以;
  • 中括号法可以使用js的关键字和保留字作为属性名,而点语法不可以 (尽量避免在变量或者属性中使用关键字或保留字);

react中操作dom

当我们在react中需要做一些dom操作时,就会使用到react给我们预留的“后门”。

之所以称之为“后门”,是因为当前流行框架react/vue出现的目的就是避免操作dom,造成渲染浪费。然而很多时候不能不操作dom。

1、通过React.createRef()/useRef();来创建一个ref变量。

// 类组件中
constructor (props) {
    super(props);
    this.myRef = React.createRef();
}
// 函数组件中(使用hooks)
const myRef = useRef();

2、在对应的dom节点上写入ref。

// 类组件
<div className="t-box scroll-bar" ref={this.myRef}>
    ...
</div>

// 函数组件
<div className="t-box scroll-bar" ref={myRef}>
    ...
</div>

3、使用react-dom中的findDomNode()得到具体的dom。

import ReactDom from 'react-dom';
// 类组件
const getTargetDOM = ReactDom.findDOMNode(this.myRef.current);
// 函数组件
const getTargetDOM = ReactDom.findDOMNode(myRef.current);

4、根据获取的dom进行一些dom操作即可。例如操作js盒模型、设置文字样式等等。

// 设置向上滚动距离
getTargetDOM.scrollTop = 1000;
getTargetDOM.style.color = 'red';

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • React虚拟渲染实现50个或者一百个图表渲染

    React虚拟渲染实现50个或者一百个图表渲染

    这篇文章主要为大家介绍了React虚拟渲染实现50个或者100个图表渲染的实现,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 利用React高阶组件实现一个面包屑导航的示例

    利用React高阶组件实现一个面包屑导航的示例

    这篇文章主要介绍了利用React高阶组件实现一个面包屑导航的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • React中路由参数如何改变页面不刷新数据的情况

    React中路由参数如何改变页面不刷新数据的情况

    这篇文章主要介绍了React中路由参数如何改变页面不刷新数据的情况,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

    D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

    散点图(Scatter Chart),通常是一横一竖两个坐标轴,数据是一组二维坐标,分别对应两个坐标轴,与坐标轴对应的地方打上点。由此可以猜到,需要的元素包括circle(圆)和axis(坐标轴),接下来通过本文大家分享D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本) ,一起看看
    2019-05-05
  • 使用 React Router Dom 实现路由导航的详细过程

    使用 React Router Dom 实现路由导航的详细过程

    React Router Dom 是 React 应用程序中用于处理路由的常用库,它提供了一系列组件和 API 来管理应用程序的路由,这篇文章主要介绍了使用 React Router Dom 实现路由导航,需要的朋友可以参考下
    2024-03-03
  • 详解如何优雅地在React项目中使用Redux

    详解如何优雅地在React项目中使用Redux

    这篇文章主要介绍了详解如何优雅地在React项目中使用Redux,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • react-router-dom入门使用教程(前端路由原理)

    react-router-dom入门使用教程(前端路由原理)

    这篇文章主要介绍了react-router-dom入门使用教程,主要包括react路由相关理解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • React18系列commit从0实现源码解析

    React18系列commit从0实现源码解析

    这篇文章主要为大家介绍了React18系列commit从0实现源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • 记录一次完整的react hooks实践

    记录一次完整的react hooks实践

    这篇文章主要介绍了记录一次完整的react hooks实践,通过一个简单示例,介绍了react hooks,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • 深入理解React高阶组件

    深入理解React高阶组件

    本篇文章主要介绍了深入理解React高阶组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论