react开发中遇到的问题

最新推荐文章于 2025-02-13 14:38:34 发布

蓝胖子（liaocan.top）

最新推荐文章于 2025-02-13 14:38:34 发布

阅读量3.2k

点赞数

分类专栏： react 前端

本文链接：https://blog.youkuaiyun.com/nqmysbd/article/details/86555532

版权

前端同时被 2 个专栏收录

31 篇文章

订阅专栏

react

16 篇文章

订阅专栏

本文总结了在React开发中遇到的一些问题及其解决方案，包括：1）元素类型无效问题，指出当组件不是字符串或类/函数时可能出现的错误，并给出使用`render`属性的解决方法；2）`getElementsByClassName`返回空集合，解释了原因并提示在React组件中可能无法直接获取到不在根节点下的元素；3）讨论了`onload`和`DOMContentLoaded`事件的使用及兼容性问题；4）解析JSON错误，强调已为JSON对象时不应再使用`JSON.parse()`；5）最后提到了不应该在`<p>`标签内嵌套`<div>`，因为这违反了HTML语法规则，可能导致渲染问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Element type is invalid expected a string (for built-in components) or a classfu

Element type is invalid: expected a string (for built-in components) or a class/function (for compos

{/* <Route exact path="/" component={FrontHome} /> 这种有问题如果fronthome是嵌套route的而不是组件只能用render */}

<Route path="/" render={() => frontroutes} />

2.getElementsByClassName的htmlcolletion 的length 为0

看到的动态添加的【】里面其实是零

HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。

var tooltip = document.getElementsByClassName("ant-tooltip-inner");

console.log('tooltip', tooltip.length)

这样获取总是获取不了在componentDidmount 里面

原因 ant-tooltip-inner 的div没有包含在 react的单页div root 下面是通过绝对定位在 root外面的所以在react 组件中的 didmount是拿不到的 byid 也是一样拿不到

1、onload事件

onload事件所有的浏览器都支持，所以我们不需要什么兼容，只要通过调用

window.onload = function(){ }

2、DOMContentLoaded 事件

DOMContentLoaded不同的浏览器对其支持不同，所以在实现的时候我们需要做不同浏览器的兼容。

1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件；

2）IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，该事件的目的是提供与文档或元素的加载状态有关的信息。

3) 更低的ie还有个特有的方法doScroll，通过间隔调用：document.documentElement.doScroll("left");

可以检测DOM是否加载完成。当页面未加载完成时，该方法会报错，直到doScroll不再报错时，就代表DOM加载完成了。该方法更接近DOMContentLoaded的实现。

3.SyntaxError Unexpected token u in JSON at position 0

SyntaxError: Unexpected token u in JSON at position 0

1.对象本身已经是json对象了然后 JSON.parse() 就会报错

2.字符串格式不正确

4.div cannot appear as a descendant of p

Based on the warning message, the component ReactTooltip renders an HTML that might look like this:

According to this document, a <p></p> tag can only contain inline elements. That means putting a <div></div> tag inside it should be improper, since the div tag is a block element. Improper nesting might cause glitches like rendering extra tags, which can affect your javascript and css.

If you