如何消除React中`action=false`与`href`混用的控制台警告？

我编写了如下React组件代码，可正常运行，但在Firefox浏览器控制台中，每个ListGroupItem都会触发上述警告：

const ListSimple = () => (
    <div className="ListSimple">
        <h3>Simple List</h3>
        <ListGroup>
        <ListGroupItem href="#">Cras justo odio</ListGroupItem>
        <ListGroupItem href="#">Dapibus ac facilisis in</ListGroupItem>
        <ListGroupItem href="#">Morbi leo risus</ListGroupItem>
        <ListGroupItem href="#">Porta ac consectetur ac</ListGroupItem>
        <ListGroupItem href="#">Vestibulum at eros</ListGroupItem>
        </ListGroup>
    </div>
);
export default ListSimple;

控制台警告详情：

Warning: `action=false` and `href` should not be used together. warning.js:34
    printWarning warning.js:34
    warning warning.js:57
    ListGroupItem ListGroupItem.js:41
    React 13
    push history.ts:643
    navigate hooks.tsx:212
    useLinkClickHandler index.tsx:819
    handleClick index.tsx:458
    React 23
    js index.js:8
    factory react refresh:6

解决方法 #

这个警告来自你使用的ListGroupItem组件（推测是React Bootstrap组件），默认action属性为false，此时组件仅作为普通列表项，不应该搭配href属性使用。以下是几种消除警告的方案：

方案1：开启action属性 #

当需要让列表项成为可点击的链接时，显式设置action={true}，让组件正确处理链接交互：

const ListSimple = () => (
    <div className="ListSimple">
        <h3>Simple List</h3>
        <ListGroup>
            <ListGroupItem action={true} href="#">Cras justo odio</ListGroupItem>
            <ListGroupItem action={true} href="#">Dapibus ac facilisis in</ListGroupItem>
            <ListGroupItem action={true} href="#">Morbi leo risus</ListGroupItem>
            <ListGroupItem action={true} href="#">Porta ac consectetur ac</ListGroupItem>
            <ListGroupItem action={true} href="#">Vestibulum at eros</ListGroupItem>
        </ListGroup>
    </div>
);
export default ListSimple;

方案2：指定渲染为原生<a>标签 #

如果不需要action带来的高亮、点击反馈等样式，直接通过as属性让组件渲染成原生链接标签：

const ListSimple = () => (
    <div className="ListSimple">
        <h3>Simple List</h3>
        <ListGroup>
            <ListGroupItem as="a" href="#">Cras justo odio</ListGroupItem>
            <ListGroupItem as="a" href="#">Dapibus ac facilisis in</ListGroupItem>
            <ListGroupItem as="a" href="#">Morbi leo risus</ListGroupItem>
            <ListGroupItem as="a" href="#">Porta ac consectetur ac</ListGroupItem>
            <ListGroupItem as="a" href="#">Vestibulum at eros</ListGroupItem>
        </ListGroup>
    </div>
);
export default ListSimple;

方案3：React路由场景下使用Link组件 #

如果你的链接是用于单页应用内部路由跳转，推荐使用React Router的Link组件替代原生链接，避免页面刷新：

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

const ListSimple = () => (
    <div className="ListSimple">
        <h3>Simple List</h3>
        <ListGroup>
            <ListGroupItem as={Link} to="/your-path">Cras justo odio</ListGroupItem>
            <ListGroupItem as={Link} to="/another-path">Dapibus ac facilisis in</ListGroupItem>
            {/* 其他列表项按需求修改`to`属性 */}
        </ListGroup>
    </div>
);
export default ListSimple;

内容的提问来源于stack exchange，提问作者Jay