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

总是会给我这个错误：

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

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

因此，最终，包装的组件永远不会返回。只是一个JSX版本应该是HOC的论据。

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

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

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

我正在使用this HOC reference。我正在使用Webpack 2和webpack-dev-server作为Windows 10上的工具。

Answer 1

React认为你试图将这些道具传递给DOM元素而不是反应组件，这会给你带来未知的道具错误。 React将较低的camel case解释为DOM元素，因此enhacedComponent应为EnhacedComponent。

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

ReactJS'高阶组件错误：“未知道具”

1 个答案: