Question

React无法识别DOM元素上的computedMatch属性。如果您有意让它作为自定义属性出现在DOM中，请将其拼写为小写computedmatch。如果您不小心从父组件传递了它，请将其从DOM元素中删除。

这是有问题的代码：

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    NavLink
} from "react-router-dom";
import "./AdminPage.css";

export default class AdminPage extends React.Component {
    render() {
        return (
            <div>
                <Router>
                    <nav>
                        <ul className="nav nav-tabs">
                            <li className="nav-item">
                                <NavLink to="/admin/books" className="nav-link" activeClassName="active">Books</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to="/admin/branches" className="nav-link" activeClassName="active">Branches</NavLink>
                            </li>
                            <li className="nav-item">
                                <NavLink to="/admin/members" className="nav-link" activeClassName="active">Members</NavLink>
                            </li>
                        </ul>
                    </nav>
                    <Switch>
                        <div> <!-- this appears to be the element that is receiving a "computedMatch" property -->
                            <Route exact path="/admin/books">
                                Books
                            </Route>
                        </div>
                    </Switch>
                </Router>
            </div>
        )
    }
}

Answer 1

因为fn(Container<int>{}, Container<float>{});将Switch传递给满足以下两个条件之一的第一个孩子：

具有与当前位置匹配的computedMatch或path道具。
没有这两个道具（form，path）

代码中有问题的元素是form。

在Switch.js的render方法中，您将看到：

div

并且由于React.Children.forEach(this.props.children, child => { if (match == null && React.isValidElement(child)) { element = child; const path = child.props.path || child.props.from; match = path ? matchPath(location.pathname, { ...child.props, path }) : context.match; } }); return match ? React.cloneElement(element, { location, computedMatch: match }) : null;不是合法的DOM属性/属性，因此您会得到警告。

Unknown Prop Warning

React Router中的“ React无法识别DOM元素上的prop”

1 个答案: