ReactJS' Higher Order Components error: "Unknown props"

Question

昨天，我正在阅读有关高阶组件的 React 文档，并尝试使用他们提供的一些示例。但是，对我来说，它不起作用。

这是我创建的一个简单的 HOC，只是为了包装另一个组件，看看它是如何工作的。但从一开始，它就没有用。

import React, { Component } from 'react';
export default function (enhacedComponent) {
  class Authenticate extends Component {
    constructor(props) {
      super(props);
    }
    render() {
      return <enhacedComponent {...this.props} />;
    }
  }
  return Authenticate;
}

它总是 returns 我这个错误：

Warning: Unknown props `location`, `params`, `route`, `router`, `routeParams`, `routes` on <enhacedComponent> tag. Remove these props from the element.

当我检查控制台中的 HTML 元素部分时，我发现这个 HOC returns 的实际值是 <enhacedComponent></enhacedComponent>。所以包裹的组件永远不会出来！

所以，最终，包装组件永远不会 returns。只是 HOC 参数的 JSX 版本。

我认为，由于 JSX 只是另一种语法，而传递普通 JavaScript 的独特方式是使用 {}，我尝试这样做，但没有成功：

<{enhancedComponent} {...this.props }/>

我真的不知道该怎么办或我做错了什么。

我正在使用 this HOC reference。我在 Windows 10.

上使用带有 webpack-dev-server 的 Webpack 2 作为工具

Answer 1

React 认为您正在尝试将这些道具传递给 DOM 元素而不是 React 组件，这会给您带来 unknown props 错误。 React 将小驼峰式大小写解释为 DOM 元素，因此 enhacedComponent 应该是 EnhacedComponent.

更多信息在这里： https://facebook.github.io/react/warnings/unknown-prop.html

ReactJS' Higher Order Components error: "Unknown props"

ReactJS' Higher Order Components error: "Unknown props"

javascript

reactjs

higher-order-components