解决React报错The tag is unrecognized in this browser

目录
  • 总览
  • 确保标签存在
  • 小写字母开头

总览

当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时,会产生"The tag is unrecognized in this browser"React警告。为了解决该问题,只使用有效的标签名称,并将你的组件的第一个字母大写。

这里有个例子来展示错误是如何发生的。

// App.js
const App = () => {
  // ️ Warning: The tag <p1> is unrecognized in this browser.
  // If you meant to render a React component, start its name with an uppercase letter.
  return (
    <div>
      <div>
        <p1>Hello world</p1>
      </div>
    </div>
  );
};
export default App;

上述代码的问题在于,我们使用了p1标签,但该标签并不存在于浏览器中。

确保标签存在

我们必须确保只使用受支持的标签。你可以在这里查看所有Web支持的标签。你可以通过使用CTRL + F来检查一个特定的标签是否存在,并查找该标签,例如<li>

为了解决上述示例的错误,我们必须使用一个存在的标签名称。比如说,h1标签或者p标签。

const App = () => {
  return (
    <div>
      <div>
        <h1>Hello world</h1>
      </div>
    </div>
  );
};
export default App;

小写字母开头

导致"The tag is unrecognized in this browser"警告的另一个原因是,当我们以小写字母开头一个组件名称时。

const greet = () => {
  return <h2>Hello world</h2>;
};
const App = () => {
  // ️ Warning: The tag <greet> is unrecognized in this browser.
  // If you meant to render a React component, start its name with an uppercase letter.
  return (
    <div>
      <div>
        <greet />
      </div>
    </div>
  );
};
export default App;

上述代码的问题在于,greet组件的名称以小写字母开头。

所有的组件名称必须以大写字母开头,因为这是React用来区分我们编写的组件和存在于浏览器中的内置标签的惯例。

// ️ capitalize first letter
const Greet = () => {
  return <h2>Hello world</h2>;
};
const App = () => {
  return (
    <div>
      <div>
        <Greet />
      </div>
    </div>
  );
};
export default App;

一旦我们将组件名称的第一个字母大写,React就不会认为我们试图使用一个在浏览器中不存在的标签,而是知道我们在使用一个自定义组件。

以上就是解决React报错The tag is unrecognized in this browser的详细内容,更多关于React报错tag unrecognized的资料请关注我们其它相关文章!

(0)

相关推荐

  • 解决React报错Unexpected default export of anonymous function

    目录 总览 命名 注释单行规则 总结 总览 当我们尝试使用默认导出来导出一个匿名函数时,会导致"Unexpected default export of anonymous function"警告.为了解决该错误,在导出函数之前,为函数赋予一个名称. 这里有个例子来展示警告是如何发生的. // Header.js // ️ default export for anonymous function // ️ Unexpected default export of anonymous

  • 解决React报错Cannot assign to 'current' because it is a read-only property

    目录 总览 正确的泛型 DOM元素 总览 当我们用一个null值初始化一个ref,但在其类型中不包括null时,就会发生"Cannot assign to 'current' because it is a read-only property"错误.为了解决该错误,请在ref的类型中包含null.比如说,const ref = useRef<string | null>(null) . 这里有个例子来展示错误是如何发生的. // App.tsx import {useEf

  • 解决React报错Expected an assignment or function call and instead saw an expression

    目录 正文 显式返回 隐式返回 返回对象 正文 当我们忘记从函数中返回值时,会产生"Expected an assignment or function call and instead saw an expression"错误.为了解决该错误,确保显式地使用return语句或使用箭头函数隐式返回. 下面有两个示例来展示错误是如何产生的. // App.js const App = props => { const result = ['a', 'b', 'c'].map(el

  • 解决React报错JSX element type does not have any construct or call signatures

    目录 总览 React.ElementType 传递JSX元素 更新类型包 总览 当我们试图将元素或react组件作为属性传递给另一个组件,但是属性的类型声明错误时,会产生"JSX element type does not have any construct or call signatures"错误.为了解决该错误,可以使用React.ElementType类型. 这里有个例子来展示错误是如何发生的. // App.tsx import React from 'react'; i

  • React Hook 'useEffect' is called in function报错解决

    目录 总览 声明组件 声明自定义钩子 总结 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function",可以将函数名的第一个字母大写,或者使用use作为函数名的前缀.比如说,useCounter使其成为一个组件或一个自定义钩子. 这里有个示例用来展示错误是如何发生的. // App.j

  • 解决React报错Encountered two children with the same key

    目录 总览 index 唯一标识 总览 当我们从map()方法返回的两个或两个以上的元素具有相同的key属性时,会产生"Encountered two children with the same key"错误.为了解决该错误,为每个元素的key属性提供独一无二的值,或者使用索引参数. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ name property is not a unique identifier con

  • 解决React报错Expected `onClick` listener to be a function

    目录 总览 传递函数 传递参数 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function"报错.为了解决该报错,请确保只为元素的onClick属性传递函数. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Warning: Expected `onClick` listener to be a function /

  • 解决React报错Functions are not valid as a React child

    目录 总览 调用函数 总结 总览 产生"Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render."错误 通常是因为以下两个原因: 从render中返回一个函数引用而不是一个组件. 使用 react router 路由作为<Route path="/about" el

  • 解决React报错The tag is unrecognized in this browser

    目录 总览 确保标签存在 小写字母开头 总览 当我们使用一个在浏览器中不存在的标签或以小写字母开头的组件名称时,会产生"The tag is unrecognized in this browser"React警告.为了解决该问题,只使用有效的标签名称,并将你的组件的第一个字母大写. 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Warning: The tag <p1> is unrecognized i

  • 解决React报错useNavigate() may be used only in context of Router

    目录 总览 useNavigate Jest replace 总览 当我们尝试在react router的Router上下文外部使用useNavigate 钩子时,会产生"useNavigate() may be used only in the context of a Router component"警告.为了解决该问题,只在Router上下文中使用useNavigate 钩子. 下面是一个在index.js文件中将React应用包裹到Router中的例子. // index.j

  • 解决React报错Style prop value must be an object

    目录 总览 映射 提取 总览 在React中,当我们为元素的style 属性传递字符串时,会产生"Style prop value must be an object"警告.为了解决该警告,使用从属性到值的映射.比如说,style={{paddingLeft: '15px'}} . 这里有个例子来展示错误是如何发生的. // App.js const App = () => { // ️ Style prop value must be an object eslint(reac

  • 解决React报错You provided a `checked` prop to a form field

    目录 总览 defaultChecked onChange 初始值 总览 当我们在多选框上设置了checked 属性,却没有onChange 处理函数时,会产生"You provided a checked prop to a form field without an onChange handler"错误.为了解决该错误,可以使用defaultChecked 属性,或者在表单字段上设置onChange 属性. 这里有个例子用来展示错误是如何发生的. // App.js export

  • 解决React报错Property does not exist on type 'JSX.IntrinsicElements'

    目录 总览 组件大写 类型声明 总结 总览 当组件名称以小写字母开头时,会导致"Property does not exist on type 'JSX.IntrinsicElements'"错误.为了解决该错误,确保组件名称总是以大写字母开头,安装React声明文件并重启你的开发服务器. 这里有个示例用来展示错误是如何发生的. // App.tsx // ️ name starts with lowercase letter function myComponent() { retu

  • 解决React报错Rendered more hooks than during the previous render

    目录 总览 顶层调用 条件之上 总览 当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Rendered more hooks than during the previous render"错误.为了解决该错误,将所有的钩子移到函数组件的顶层,以及不要在条件中使用钩子. 这里有个示例用来展示错误是如何发生的. // App.js import {useEffect, useState} from 'react'; export default function App

随机推荐