2

昨天，我正在阅读有关高阶组件的 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;
}

它总是返回我这个错误：

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

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

因此，最终，被包装的组件永远不会返回。只是应该是 HOC 参数的 JSX 版本。

我认为由于 JSX 只是另一种语法，而传递纯 JavaScript 的唯一方法是 using {}，所以我尝试这样做，但没有成功：

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

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

我正在使用这个 HOC 参考。我在 Windows 10 上使用带有 webpack-dev-server 的 Webpack 2 作为工具。

4

1 回答 1

2

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

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

于 2017-03-04T04:05:51.593 回答