2017-03-04 6 views
2

昨日、高次コンポーネントの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と一緒に使っています。

答えて

2

Reactは、これらの小道具を反応要素ではなくDOM要素に渡そうとしていると考えています。 Reactは、より低いラクダのケースをDOM要素として解釈するので、enhacedComponentEnhacedComponentでなければなりません。

関連する問題