我正在使用带有 bootstrap-v3 的 React TypeScript,问题出在 Breadcrumb 和 React-router-dom 上:
react 提示警告:React 无法识别 DOM 元素上的 compulatedMatch
属性。
这个computeMatch是怎么来的? 我正在使用最新的react-bootstrap:
第一行是带有奇怪的compatedmatch属性的html节点:
<ol computedmatch="[object Object]" location="[object Object]" role="navigation" aria-label="breadcrumbs" class="breadcrumb"><li class=""><span href="#" role="button"><a href="/">Home</a></span></li><li class=""><span href="#" role="button"><a href="/">React</a></span></li><li class=""><span href="#" role="button"><a href="/name">Author</a></span></li></ol>
以下是 Breadcrumb.js lib 文件:
import _extends from "@babel/runtime-corejs2/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime-corejs2/helpers/esm/objectWithoutPropertiesLoose";
import _inheritsLoose from "@babel/runtime-corejs2/helpers/esm/inheritsLoose";
import classNames from 'classnames';
import React from 'react';
import BreadcrumbItem from './BreadcrumbItem';
import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
var Breadcrumb =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(Breadcrumb, _React$Component);
function Breadcrumb() {
return _React$Component.apply(this, arguments) || this;
}
var _proto = Breadcrumb.prototype;
_proto.render = function render() {
var _this$props = this.props,
className = _this$props.className,
props = _objectWithoutPropertiesLoose(_this$props, ["className"]);
var _splitBsProps = splitBsProps(props),
bsProps = _splitBsProps[0],
elementProps = _splitBsProps[1];
var classes = getClassSet(bsProps);
return React.createElement("ol", _extends({}, elementProps, {
role: "navigation",
"aria-label": "breadcrumbs",
className: classNames(className, classes)
}));
};
return Breadcrumb;
}(React.Component);
Breadcrumb.Item = BreadcrumbItem;
export default bsClass('breadcrumb', Breadcrumb);
我的 tsx 代码是:
<Router>
<Switch>
<Breadcrumb computedMatch={undefined}>
<Breadcrumb.Item componentClass="span">
<Link to="/">Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item componentClass="span">
<Link to="/">React</Link>
</Breadcrumb.Item>
<Breadcrumb.Item active={false} componentClass="span">
<Link to="/name">Author</Link>
</Breadcrumb.Item>
</Breadcrumb>
<Route path="/:name" component={gridInstance} />
</Switch>
</Router>
最佳答案
您收到此警告是因为您放置 <Switch>
的方式所致。标签。只保留<Route/>
和<Redirect/>
<Switch>
内的标签标签来消除警告。
类似这样的事情:
<Router>
<Breadcrumb computedMatch={undefined}>
<Breadcrumb.Item componentClass="span">
<Link to="/">Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item componentClass="span">
<Link to="/">React</Link>
</Breadcrumb.Item>
<Breadcrumb.Item active={false} componentClass="span">
<Link to="/name">Author</Link>
</Breadcrumb.Item>
</Breadcrumb>
<Switch>
<Route path="/:name" component={gridInstance} />
</Switch>
</Router>
关于reactjs - React 无法识别 DOM 元素上的 `computedMatch` 属性。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52916289/