上位のDOM to Wrap機能のコンポーネント

Question

ボタンを使用して機能をラップする必要があります。しかし、別のコンポーネントのレンダリングメソッドでHOCを呼び出すと、何も得られません。

私はこのHOC

import React,{Component,PropTypes} from 'react'; 

export let AddComment = (ComposedComponent) => class AC extends React.Component { 


     render() { 
      return (
       <div class="something"> 
        Something... 
        <ComposedComponent {...this.props}/> 
       </div> 
      ); 
     } 


} 

と私はでaddCommentはダイアログを開いて、私はボタンをクリックすると、コメントのフォームを送信したいこの

import {AddComment} from '../comments/add.jsx'; 
var Review = React.createClass({ 

render: function(){ 
    return (
      <div className="container"> 
{AddComment(<button>Add Comment</button>,this.props)} 
</div> 
}); 
module.exports = Review; 

をやろうとしています。私はAddCommentがアプリケーションを介して他のコンポーネントを利用できるようにする必要があります。

HOCパターンは正しいですか？どうすれば簡単にこれを達成できますか？

おかげ

Answer 1

本当に速い要約する：高次成分は何ですか？

シンプルなコンセプトのためだけの空想名前：簡単に言えば：部品を取り込み、 部品のより強化されたバージョンをあなたに戻っコンポーネントを。

• 我々は、本質的にコンポーネントを強化しています。

  • ベースコンポーネントに渡される小道具 の新しいコレクションに所有者の小道具をマップする関数を受け入れます。私たちは以下のこと
    子コンポーネントでそれらが利用可能に持つことができるように私たちは、基本的に包まれたコンポーネントにダウン そのBaseComponentからダウン小道具を渡している

  は
  • ：

  使用すると、複数の上位構成します上位コンポーネントを単一の に変換します。

  import PropTypes from 'prop-types'; 
  import React, { Component } from 'react'; 
  import { AddComment } from '../comments/add.jsx'; 
  
  const mapProps = propFunction => Component => (props) => { 
  return React.createFactory(Component)(propFunction(props)); 
  }; 
  
  const compose = (propFunction, ComponentContainer) => (BaseComponent) => { 
      return propFunction(ComponentContainer(BaseComponent)); 
  }; 
  
  const Review = AddComment(({ handleReviewToggle }) => (
      <div className="container"> 
       <ReviewButton 
       primaryText="Add Comment" 
       _onClick={handleReviewToggle} 
       /> 
      </div> 
  )); 
  
  export default Review; 
  

// ==================================== ============================== //ボタンやダイアログを持っています

const EnhanceReview = compose(withProps, AddComment)(Review); 

    const withProps = mapProps(({ ...props }) => ({ ...props })); 

でaddCommentコンテナ自体。 // =========================================

export function AddComment(ComposedComponent) { 
    class AC extends React.Component { 
    constructor() { 
     super(); 

     this.state = {open: false}; 
    } 

    handleReviewToggle =() => { 
     this.setState({ open: !this.state.open }) 
    } 

    render() { 
     return (
     <ComposedComponent 
      {...this.props} 
      {...this.state} 
      {...{ 
      handleReviewToggle: this.handleReviewToggle, 
      }} 
     /> 
    ); 
    } 
    } 

    export default AddComment; 

=================================

状態を変更するためにイベントを発生させるReviewButtonボタンtrueまたはfalse。// =========================================

const ReviewButton = ({ _onClick, primaryText }) => { 
    return (
     <Button 
     onClick={_onClick} 
     > 
     {primaryText || 'Default Text'} 
     </Button> 
    ); 
    }; 

    export default ReviewButton; 

========================= //

は、しかし、これは、すべてのライブラリを使用せずに行われました。 recomposeと呼ばれるものが1つあります：https://github.com/acdlite/recomposeです。私は、ライブラリなしで高次コンポーネントの理解を深めるために試してみることを強くお勧めします。

あなたは高次成分でプレーした後、以下のこれらの質問に答えることができる必要があります：

1. 高次コンポーネントは何ですか？
2. HOCを使用しての欠点は何ですか？ユースケースは何ですか？
3. これはどのようにパフォーマンスを改善しますか？そして、これを使ってパフォーマンスを最適化するにはどうすればいいですか？
4. HOCを使用する時期はいつですか？