alfa-laboratory/cn-decorator

access "cn" function not only in render method.

dregenor opened this issue · 3 comments

if render function in component was divided to multiple functions,
required manually add "cn" to each this function (which is not comfortable with map and reduce cases)

may be should somehow store cn in private method and have access to it via "this.cn()"

@dregenor, as I understand - you tell about this example.

render(cn) {
    return (
       <ul className={cn()}>
          { this.props.items.map(item => this.renderItem(cn, item ))}
       </ul>
    );
}

renderItem(cn, item) {
   return (
        <li className={ cn('item') }></li>
   );
}

and suggest to use cn as class method

render(cn) {
    return (
       <ul className={ this.cn() }>
          { this.props.items.map(item => this.renderItem(item ))}
       </ul>
    );
}

renderItem(item) {
   return (
        <li className={ this.cn('item') }></li>
   );
}

But you can see that in each method you should write this.cn instead cn() or write something like this

 const { cn } = this;

I think that it's not more readable.

may be some method decorator like

@cnInject()
renderItem(cn) {
...
}

or may be property decorator