时间戳

首页 > 解决方案 > 警告：使用了不正确的大小写。将 PascalCase 用于 React 组件

javascript - 警告：使用了不正确的大小写。将 PascalCase 用于 React 组件

问题描述

我正在尝试使用 React.createElement 来呈现链接。

我的代码：

    createElement(
    item.to ? "Link" : "div",
    {
        className: slidebar ? "slidebar-row" : "header-menu-element",
        onClick: showSubMenu,
        to: item.to
    },
    [
        <button>{item.title}</button>,
        slidebar ? subMenu ?
            item.iconSlidebarOpened :
            item.iconSlidebarClosed :
            subMenu ? item.iconHeaderMenuOpened : item.iconHeaderMenuClosed
    ]
)

错误：

> Warning: <Link /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

标签： javascriptreactjs

解决方案

当你想从其他 React 组件创建时，你应该传递实际 Link的组件。react-router-dom

创建并返回给定类型的新 React 元素。type 参数可以是标签名称字符串（例如'div'or 'span'）、React 组件类型（类或函数）或 React 片段类型。

import { Link } from 'react-router-dom';

createElement(
  item.to ? Link : "div", // <-- Link, not "Link"
  {
    className: slidebar ? "slidebar-row" : "header-menu-element",
    onClick: showSubMenu,
    to: item.to
  },
  [
    <button>{item.title}</button>,
    slidebar ? subMenu ?
      item.iconSlidebarOpened :
      item.iconSlidebarClosed :
      subMenu ? item.iconHeaderMenuOpened : item.iconHeaderMenuClosed
  ]
)

推荐阅读