React 无法识别 DOM 元素上的 `computedMatch` 属性。答案

【问题标题】：React does not recognize the `computedMatch` prop on a DOM element.React 无法识别 DOM 元素上的 `computedMatch` 属性。
【发布时间】：2019-03-25 18:11:22
【问题描述】：

我正在使用带有 bootstrap-v3 的 react typescript，问题在于 Breadcrumb 和 react-router-dom：

反应提示警告：React 无法识别 DOM 元素上的 computedMatch 属性。

这个 computedMatch 是怎么来的？我正在使用最新的 react-bootstrap：

第一行是带有奇怪的computedmatch属性的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 库文件：

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>

【问题讨论】：

我建议你添加“import ReactDOM from 'react-dom';”在您的文件中。缺少这可能会导致有关 dom 的一些问题。

标签： reactjs twitter-bootstrap-3

【解决方案1】：

您收到此警告是因为您放置 <Switch> 标记的方式。在<Switch> 标签中只保留<Route/> 和<Redirect/> 标签以消除警告。

类似这样的：

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

【讨论】：

【解决方案2】：

请勿在 Switch 方法中使用您的组件，如下所示：

<Switch>
{component}
<Component /> 
</Switch>

仅在 Switch 中使用 Redirect/Route 方法！！

【讨论】：

【解决方案3】：

我通过简单地在引导程序中使用面包屑 css 类制作了面包屑。（这意味着不使用 bootstrap-v3 中的 Breadcrumb 和 Breadcrumb.Item），问题就解决了。 bootstrap-v3 中的 Breadcrumb 肯定不是一个简单的容器，而是有一些文档中没有包含的状态。

const MyBreadcrumb = () => (
  <Router>
    <div>
      <ol className="breadcrumb">
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/topics">Topics</Link>
        </li>
      </ol>

      <hr />
    </div>
  </Router>
);

【讨论】：

大家好，5 个月过去了，现在我们有了更好的解决方案： import {LinkContainer} from "react-router-bootstrap";