ReactJS 的高阶组件错误：“未知道具”答案

【问题标题】：ReactJS' Higher Order Components error: "Unknown props"ReactJS 的高阶组件错误：“未知道具”
【发布时间】：2017-03-04 02:37:08
【问题描述】：

昨天，我正在阅读有关高阶组件的 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-dev-server 的 Webpack 2 作为工具。

【问题讨论】：

标签： javascript reactjs higher-order-components

【解决方案1】：

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

【讨论】：