昨日、高次コンポーネントのReactドキュメントを読んでいましたが、私はいくつかの例を使用しようとしていました。しかし、私のために、それは動作していません。ReactJS高次コンポーネントエラー:「Unknown props」
ここでは単純な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>
であることがわかります。ラップされたコンポーネントは決して出てこなかった!
最終的に、ラップされたコンポーネントは返されません。 HOCの議論になるべきJSX版。
私はJSXはちょうど別の構文とプレーンJavaScriptを渡すためにユニークな方法は、{}
を使用しているされているので、私はノー成功に、これを実行しようとしたことを考える
:
<{enhancedComponent} {...this.props }/>
私は本当にわかりません私が間違ってやっていること。
私はthis HOC referenceを使用しています。私はwebpack-dev-serverをWindows 10上のツールとしてwebpack-dev-serverと一緒に使っています。