ReactJS的高阶组件错误:“未知道具”
问题描述:
昨天,我正在阅读有关高阶组件的React文档,并试图使用它们的一些示例。但是,对我来说,这是行不通的。ReactJS的高阶组件错误:“未知道具”
这是一个简单的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;
}
它总是返回我这个错误:当我在控制台检查HTML元素部分
Warning: Unknown props `location`, `params`, `route`, `router`, `routeParams`, `routes` on <enhacedComponent> tag. Remove these props from the element.
,我发现实际值这个HOC的回报是<enhacedComponent></enhacedComponent>
。所以包装的组件从来没有出去!
因此,最终,封装的组件永远不会返回。只是一个JSX版本的应该是HOC的论点。
我认为既然JSX只是另一种语法,并通过简单的JavaScript是使用{}
的独特方式,我试图做到这一点,到没有成功:
<{enhancedComponent} {...this.props }/>
我真的不知道是什么要做什么或我做错了什么。我正在使用this HOC reference。我正在使用Webpack 2和webpack-dev-server作为Windows 10上的工具。
答
React认为你试图将这些道具传递给DOM元素而不是反应组件,这会给你未知的道具错误。 React将较低的驼峰解释为DOM元素,因此enhacedComponent
应该是EnhacedComponent
。
更多的信息在这里: https://facebook.github.io/react/warnings/unknown-prop.html