React Higher Order Componentsを理解する

Question

Reactの上位コンポーネントを説明してもらえますか？私は文書を読んで再読しましたが、理解を深めることはできません。ドキュメンテーションによると、HOCは、その関数に引数を渡すことによって、反応コンポーネントを返す主関数を作成することによって重複を削除するのに役立ちます。 私はそれについていくつかの質問があります。

• HOCが新しい拡張コンポーネントを作成する場合、引数としてコンポーネントを渡すことはできない可能性がありますか？
• 高次成分であるthisなどの例では、ButtonまたはEnhancedButtonです。

• 私はこのような1 HOC作成しようとした：これは、HOCが表示されない実行

  // createSetup.js 
  import React from 'react'; 
  
  export default function createSetup(options) { 
      return class extends React.Component { 
       constructor(props) { 
        super(props); 
  
        this.state = {}; 
  
        this.testFunction = this.testFunction.bind(this); 
       } 
  
       testFunction() { 
        console.log("This is a test function"); 
       } 
  
       render() { 
        return <p>{options.name}</p> 
       } 
      } 
  } 
  
  
  // main.js 
  import React from 'react'; 
  import {render} from 'react-dom'; 
  import createSetup from './createSetup'; 
  
  render((<div>{() => createSetup({name: 'name'})}</div>), 
       document.getElementById('root');); 
  

を、唯一div

は、誰もが与えられたものよりも良い例を手伝うことができますか？

Answer 1

A HOC

const createSetup = options => <p>{options.name}</p>; 

とあなたのmain.jsは、そのパラメータの1つとしてコンポーネントを取り、そのコンポーネントを強化機能です何らかの方法で。

HOCが新しいエンハンスドコンポーネントを作成する場合、引数としてコンポーネントを渡すことはできない可能性がありますか？

いいえ、条件の1つが引数の1つとしてコンポーネントを取り、いくつかの機能が追加された新しいコンポーネントが返されるため、HOCではありません。

高次コンポーネントであるButtonやEnhancedButtonなどの例では、

EnhanceButtonは、HOCであり、FinalButtonは、拡張コンポーネントです。 ...これは、HOCが表示されない、...それは、その関数あなたのcreateSetup機能がHOCではないためだだけのdiv

実行している：私はこのような1 HOCを作成しようとした

コンポーネントを返しますが、コンポーネントを引き上げるためにコンポーネントを引数として取りません。

のが基本的なHOCの例を見てみましょう：

const renderWhen = (condition, Component) => 
    props => condition(props) 
    ? <Component {...props} /> 
    : null 
); 

そして、あなたはこのようにそれを使用することができます：あなたの EnhancedLinkは aコンポーネントのようになりますが、あなたが財産を渡すと今

const EnhancedLink = renderWhen(({invisible}) => !invisible, 'a'); 

invisibleをtrueに設定するとレンダリングされません... aコンポーネントのデフォルトの動作が強化されました。他のコンポーネントでもこれを行うことができます。

多くの場合、HOC機能はカレーされ、コンポーネントの引数は次のように...最後に行く：

const renderWhen = condition => Component => 
    props => condition(props) 
    ? <Component {...props} /> 
    : null 
); 

反応-再来のconnect機能...組成物が容易になりますと同じように。 recomposeをご覧ください。

Answer 2

であなたのcreateSetup.js試してみてください。

const comp = createSetup({ name: 'name' }); 
render((<div>{comp}</div>), 
    document.getElementById('root'));