React根据数组对象渲染DOM元素，页面不显示DOM元素

最新推荐文章于 2024-06-03 14:59:32 发布
最新推荐文章于 2024-06-03 14:59:32 发布
阅读量915 收藏
点赞数
分类专栏： ant design - react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/125235636
版权
博主在项目中遇到React根据数组对象渲染DOM元素时页面无显示的问题。起初怀疑是数据类型或双层map遍历导致，实际上问题出在return语句上。习惯于ES6语法的单行map输出，此处忽略了在渲染DOM前需要显式return，这是一个容易忽视的bug。
摘要由CSDN通过智能技术生成

今天写项目遇到一个问题：React根据数组对象渲染DOM元素，页面不显示DOM元素，这是怎么回事呢？

以为是数据类型的问题，双层map遍历数据导致不成功。其实问题出在return上！！！

我在数据遍历的时候，使用console.log()输出了要查看的数据，然而忘记在后面要渲染的DOM元素的之前写上return！

用惯了es6语法，map()遍历数据单行输出的代码不需要写return，这里DOM渲染就也忘记写，真是个难忘的bug。

每一天，每一步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React学习之将DOM给展示出来(二)
qq_18661257的专栏
03-15 1367
1.将JSX展现到DOM节点中React中的经常性的元素，我想大家知道JSX(不知道的读者，请看本人博客JSX讲解)，如下所示，言简意赅：const element = <h1>Hello, world</h1>;然而不同于浏览器中页面的DOM，React有自己的DOM，即JSX对象，React的一部分作用就是将JSX对象更新到网页中的DOM节点上，如何将JSX对象更新到DOM节点上就是一个关键性的
react在div里面追加元素_React如何将组件渲染到指定DOM节点详解
weixin_39801465的博客
12-19 2852
前言众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构，如同一个简单的函数，就可以得到一个可以复用的react组件。但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden的时候，问题就会出现了。例如就像下面的这样：我们实际期待的效果是这样的：幸运的是，...
ios react dom渲染完成但是页面未显示
jjy8040的博客
08-01 1170
前提：数据获取是在同一个js中，数据dom创建在同一处for循环中，放入同一个数组，dom中样式根据数据判断显示对应的class，部分展示的class差距较大：当某数据为空时对应class显示display:none或font-size:0等不显示较为简单的方法；当该数据不为空时显示对应的class较为复杂。 影响：dom渲染完成，功能也可使用，即点击有对应反应，但是前端页面（ios）部分列表可...
React渲染不出来dom元素，有数据
qq_44471484的博客
08-30 505
React 渲染dom 遍历数据 不显示
react在组件内插入标签_react组件中新添加了部分DOM为什么显示不出来
weixin_39771791的博客
01-17 319
import React from 'react';import AddCharacterStore from '../stores/AddCharacterStore';import AddCharacterActions from '../actions/AddCharacterActions';class AddCharacter extends React.Component {const...
document.getElementById(‘enviorconfig‘).innerHTML渲染页面不显示
最新发布
2301_80636534的博客
06-03 368
使用nextTick 让innerHTML在dom渲染完再加载。
React如何将组件渲染到指定DOM节点详解
08-29
React 如何将组件渲染到指定 DOM 节点详解 React 框架是一个基于组件的框架，它提供了一种简单的方式来构建用户界面。但是，在某些情况下，我们需要将组件渲染到指定的 DOM 节点中，而不是默认的根节点。这篇文章将...
详解操作虚拟dom模拟react视图渲染
10-18
React的渲染原理基于React元素（React Element）的概念，这是一个不可变的描述UI的简单对象。当我们调用setState方法时，React会更新组件的状态，然后创建新的React元素树。接着，React通过diff算法（差异算法）比较...
react-使用自定义元素将React组件挂载到DOM
08-14
在实际项目中，这样的实现方式可以让我们在不改变现有DOM结构的情况下，将React组件嵌入到任何自定义元素中，极大地提高了代码的灵活性和可复用性。同时，自定义元素的特性也可以帮助我们在React应用中实现更好的...
react 三目运算渲染dom的替代方案
01-07
{ Array.isArray(this.props.qjnyxnqk)?this.props.qjnyxnqk.map((item, i) => xxxxxxxxxxx ):null } { Array.isArray(this.props.qjnyxnqk)&&this.props.qjnyxnqk.map((item, i) => xxxxxxxxxx ...
react 页面渲染为空的情况
qq_39966730的博客
11-10 657
react 页面渲染为空的情况
react使用dva解决接口请求时间过长页面接收不到数据问题
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-02 2727
一、什么是dva dva 首先是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva 还额外内置了react-router和fetch，所以也可以理解为一个轻量级的应用框架。具体永发特性请看dva官网api.（我的理解就是react框架中加了redux数据管理模块，只不过是集成进去了，不用手动去创建redux的action,store等等）。 二、上...
React---内容的显示与否（一）
weixin_42400404的博客
04-16 540
import React from 'react'; import ReactDOM from 'react-dom'; class AdminLogin extends React.Component { render () { return ( <div>admin用户登录显示</div> ) ...
React 框架基础了解及虚拟DOM的解析
致我逝去的青春的博客
04-18 430
官网网址：https://react.docschina.org/ React 是一个用于构建用户界面的JavaScript库 核心专注于视图,目的实现组件化开发 每个引入的组件里有什么东西 react是核心模块，里面有创建组件，属性和状态的管理 react-dom把虚拟dom转变为真实dom
vue：关于异步请求导致页面不渲染问题的解决
defined_的博客
05-08 2697
最近在vue中使用axios请求时获取后端数据时，发现因为后端返回数据需要时间，导致页面渲染时没有拿到数据，数据无法渲染出来。因为只有将其声明为reactive或是ref类型，它才是一个响应式的变量，才能在自身值改变时重新渲染页面。可以看出试了很多方法，最后发现是变量定义的错误。
Vue -- 动态渲染的数据在页面获取不到DOM元素
weixin_33892359的博客
08-10 3531
问题：通过后台接口获取的数据，在页面中正常显示，但获取不到DOM元素（可以console出，但获取不到子元素） 解决办法如下 在获取页面元素的外层套上this.$nextTick this.$nextTick(function(){ var imgs = this.$refs.imgs; console.log(...
Js获取不到DOM元素问题
winner_ch的博客
06-02 2204
对于想要从事前端的开发人员来讲，使用JS操作DOM是家常便饭，但是初学者在通过document对象获取HTML的DOM元素的时候，会出现DOM元素获取不到的问题，原因是对JS的执行过程不太了解。
react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
qq_51398495的博客
01-07 3267
一、react中图片引入方式 　以前我们用img引入图片只需要如下即可，在react中这样写会报错： <img src="../assets/zzsc1.png" /> 下面我总结了两种方式： 1、用require方式引入路劲 错误用法： <img src={require("./zzsc1.png")} /> 上面这样写也是不会生效的，因为如果使用create-react-app和require导入图像，require返回一个ES模块而不是字符...
react渲染dom
weixin_45264936的博客
04-30 1181
【第1386期】React从渲染原理到性能优化（一） 黄琼 前端早读课 2018-09-07 前言 没去2018 React Conf的童鞋，别错过今天的。今日早读文章由腾讯IMWeb@黄琼授权分享。 @黄琼，腾讯前端工程师，IMWeb团队成员，目前负责企鹅辅导 正文从这开始～～ 很多人都使用过React，但是很少人能说出它内部的渲染原理。有人会说，会用就行了，知道渲染原理有必要么？其实渲染原理决...
react 如何根据数组里元素动态展示数据
05-24
在上面的代码中，我们使用了 `map` 方法来遍历 `data` 数组，对于数组中的每个元素，我们都返回一个 `div` 元素，并将其渲染到页面上。`key` 属性用于告诉 React 每个元素的唯一标识，这样 React 可以更高效地更新 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值