昨天，我正在阅读有关高阶组件的 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 的独特方法是使用 {} ，我尝试这样做，但没有成功:
<{enhancedComponent} {...this.props }/>
我真的不知道该怎么办，也不知道我做错了什么。
我正在使用this HOC reference 。我在 Windows 10 上使用 Webpack 2 和 webpack-dev-server 作为工具。
最佳答案
React 认为您正在尝试将这些 props 传递给 DOM 元素而不是 React 组件，这会给您带来未知的 props 错误。 React 将小驼峰式大小写解释为 DOM 元素，因此 enhacedComponent 应该是 EnhacedComponent。
更多信息请点击这里: https://facebook.github.io/react/warnings/unknown-prop.html
关于javascript - ReactJS的高阶组件错误: "Unknown props"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42591418/