Question

在使用属性“精确”进行按钮映射期间，我收到控制台警告：

警告：收到true的非布尔属性exact。

如果要将其写入DOM，请改为传递一个字符串：   精确=“ true”或精确= {value.toString（）}。

我想我的代码中没有错误

const TOP_LEVEL_ROUTES = [
  {
    name: 'Home',
    path: HOME_URL,
    component: HomeView,
    exact: true
  },
  {
    name: 'Table',
    path: TABLE_URL,
    component: TableView
  },
  {
    name: 'About',
    path: ABOUT_URL,
    component: AboutView
  }
];

import React from 'react';
import { Link } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';

import { LOGO_URL, HOME_URL, TOP_LEVEL_ROUTES } from 'consts';
import styles from './Header.scss';

const Header = () => {
  const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={exact}
      >
        {name}
      </Button>
    ));

  return (
    <AppBar className={styles.header}>
      <Toolbar className={styles.headerToolbar}>
        <Link to={HOME_URL}>
          <img
            src={LOGO_URL}
            alt='FCIT logo'
          />
        </Link>
        <nav className={styles.headerNavbar}>
          {navigationList}
        </nav>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

Answer 1

export const Button = styled.button`
    cursor: pointer;
    text-transform: uppercase;
    padding: 10px;
    display: inline-block;
    min-width: 12rem;`enter code here`
    text-align: center;

    ${props => (props.secondary ?
        `border: none;
        color: gray;` :
        standardBorder
    )}
`

export const LinkButton = props => (
    <Button {...props}>
        <Link to={props.to} href={props.to}>{props.children}</Link>
    </Button>
)

Answer 2

将默认值添加为hylo，确保未在filterFirst中设置/显示false时不是exact或undefined。

null

Answer 3

使用模板文字修复它：

const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={`${exact}`}
      >
        {name}
      </Button>

Answer 4

真正的问题是 exact 与 <Button> 无关。它用于匹配 URL（例如，在适当的时候突出显示 NavLink），而 <Button> 只是指向一个位置。

您的修复有效，但它只是添加了一个从未使用过的属性。相反，删除带有 exact 的行。

const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={`${exact}`}                <--- doesn't do anything
        someOtherUnusedAttribute={true}   <--- same problem
      >
        {name}
      </Button>

反应路由器警告：非布尔属性“精确”收到“真”

4 个答案: