Компонент более высокого порядка в функциональности DOM to Wrap

Question

Мне нужно обернуть функциональность кнопкой a, let say. Однако, когда я вызываю 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> 
      ); 
     } 


} 

и пытается сделать это

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 открыть диалог и представить комментарии форму при нажатии на кнопку. Мне нужно, чтобы AddComment был доступен другим компонентам через приложение.

Правильный ли шаблон HOC? Как я могу легко это сделать?

Благодаря

Answer 1

Резюмируя очень быстро: Какие компоненты высшего порядка?

Просто причудливое название для простой концепции: Проще говоря: компонент, который принимает в качестве компонента и возвращает вас обратно более расширенную версию компонента.

• Мы, по существу, повышение компонента.

  • принимает функцию, которая отображает владелец реквизита для новой коллекции реквизита , которые передаются в базовый компонент.

  • Мы в основном проходим реквизит вниз от этого BaseComponent вниз к завернутой компоненте, так что мы можем иметь их доступные в этом
    детского компоненте ниже:

  Использование сочинить множественные выше Компоненты -order в одном компоненте более высокого порядка .

  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 здесь: https://github.com/acdlite/recompose. Я настоятельно рекомендую вам попробовать его без библиотеки, чтобы получить хорошее представление о компонентах более высокого порядка.

Вы должны быть в состоянии ответить на эти вопросы ниже после игры с высшими компонентами заказа:

1. Что более высокого порядка компонентов?
2. Каковы недостатки использования HOC? Каковы некоторые варианты использования?
3. Как это улучшит производительность? И как я могу использовать это для оптимизации производительности?
4. Когда подходящее время для использования HOC?