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

Question

I'm trying to use React.createElement to render a Link.

My code:

    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
    ]
)

The error:

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

Answer 1

You should pass the actual Link component from react-router-dom when wanting to create from other React components.

Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span' ), a React component type (a class or a function) , or a React fragment type.

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
  ]
)