时间戳

首页 > 解决方案 > 警告：道具类型失败：提供给“NavLink”的道具“标签”无效

reactjs - 警告：道具类型失败：提供给“NavLink”的道具“标签”无效

问题描述

我目前正在尝试将分片仪表板集成到我的反应应用程序中。一切都很好，除了搜索导航栏的缩放太大。控制台给了我以下错误：

“警告：道具类型失败：在 NavLink 中tag提供给NavLink. 的道具无效（在 SidebarNavItem.js:8 处）”。

提到的文件如下所示：

import React from "react";
import PropTypes from "prop-types";
import { NavLink as RouteNavLink } from "react-router-dom";
import { NavItem, NavLink } from "shards-react";

const SidebarNavItem = ({ item }) => (
  <NavItem>
    <NavLink tag={RouteNavLink} to={item.to}>
      {item.htmlBefore && (
        <div
          className="d-inline-block item-icon-wrapper"
          dangerouslySetInnerHTML={{ __html: item.htmlBefore }}
        />
      )}
      {item.title && <span>{item.title}</span>}
      {item.htmlAfter && (
        <div
          className="d-inline-block item-icon-wrapper"
          dangerouslySetInnerHTML={{ __html: item.htmlAfter }}
        />
      )}
    </NavLink>
  </NavItem>
);

SidebarNavItem.propTypes = {
  /**
   * The item object.
   */
  item: PropTypes.object
};

export default SidebarNavItem;

我已经用谷歌搜索了很多，但我发现的所有相关错误都是由一些不属于我的代码的组件引起的。

标签： reactjsweb-components-shards

解决方案

我有完全相同的问题，使用相同的框架。

问题是这一行：

import { NavLink as RouteNavLink } from "react-router-dom";

似乎这种导入语法将Component(function) 转换为引用，这就是您Object在登录控制台时获得 an 的原因。然后该tag属性输入错误。

解决问题的基本解决方法：

<NavLink tag={(props) => <RouteNavLink {...props} />} to={item.to}>

推荐阅读