2017-06-28 18 views
4

反応を伴うHOCをレンダリングしようとしていますが、動作させる方法を理解できません。 私は反応ナビゲーションで完璧に動作するHOCを1つ持っています。 私の考えは、レンダリングがHOCをラップするコンポーネントを表示することです。私はこのようにsthをしようとしています:反応中にHOCをレンダリングする方法

render() { 
    return (
     <View style={viewStyle}> 
     {CheckLogin(Login)} 
     </View> 
    ); 
    } 

このCheckLoginはHOCであり、ログインはコンポーネントそのものです。その結果、Reactは不平を言っていないが空白になっている。 Component自体を呼び出すHOCをレンダリングする方法

+0

'{CheckLogin}はあなたがJSを解釈していることを意味します。コンポーネントが必要な場合は、 ''が必要です。それはあなたが全面的な問題だとは確信していませんが、それはスタートですか? – jmargolisvt

+1

たぶん私はちょうど高密度ですが、HOCは何ですか? –

+0

ホック=上位コンポーネント。 @jmargolisvt問題は、私は小道具を渡さなければならないと私はどのようにわからないです – Ruffeng

答えて

4

JSX内の関数としてHOCを呼び出すだけで、レンダリングするには</>を使用する必要があります。

render() { 
    const EnhancedComponent = CheckLogin(Login); 

    return (
    <View style={viewStyle}> 
     <EnhancedComponent /> 
    </View> 
); 
} 
+0

それは動作します!本当にありがとう@クリスフェル。私の問題は、私がリターンで直接レンダリングしようとしていたことです。それは多くの助けとなり、HOCの力を適用することができます。 – Ruffeng

+3

@Crysfel、レンダリングメソッド内でHOCを使用しないでください。 レンダリングでHOCを呼び出すと、すべてのレンダリングでコンポーネントが再マウントされます。 [ここに文書化されています](https://github.com/facebook/react/blob/044015760883d03f060301a15beef17909abbf71/docs/docs/higher-order-components.md#dont-use-hocs-inside-the-render-method)また[ここで回答しました](https://stackoverflow.com/questions/39120494/react-higher-order-component-forces-re-render-of-wrapped-component) – pudgereyem

関連する問題