Yegoroot
10/15/2018 - 10:01 PM

Компоненты высшего порядка

Суть hoc сводится к тому чтобы оборачивать компоненты и добавлять свой функционал Можем создавать их двумя способами,

  • как компонеты react и возвращать props.children (например ErrorBoundary) https://snippets.cacher.io/snippet/7f721331d75d3ebf46c3
  • или как ф-ии, которая возващает ф-ию как в данном случае в данном случае добвлен массив классов classes.car, который мы передали в дочерний компонент ( 38 строка )

PS Именно таким образом (компонентом высшим порядком) и работал компонент Radium (манипуляции с inline CSS)

hoc
content_copyfile_download
import React from 'react'

const withClass = (Component, classes) => {
  return ({...props}) => 
    <div className={classes}>
      <Component {...props}/>
    </div>
}

export default withClass

// import React from 'react'

// export default (WrappedComponent, classes) => {
//     return ({ ...props} ) =>  
//         <div className={classes}> <WrappedComponent  {...props } />  </div>
// }



////  ДОЧЕРНИЙ ЭЛЕМЕНТ
... 
        return (
            <React.Fragment>
                <h3>Car name: {this.props.name}</h3>
                <p>Year <strong>{this.props.year}</strong></p>
                <input 
                    type="text" 
                    value={this.props.name} 
                    onChange={this.props.onChangeName} 
                />
            </React.Fragment>
        );
    }
}


export default withClass(Car, classes.car)