3
\$\begingroup\$

After reading this, I'm on board, however it doesn't get into passing methods from the parent class. In my mixins right now I have a lot of helper functions that are used across the various components that use the mixin.

I would simply do something like below, unless someone has a better approach? Note I have anywhere from half a dozen to a dozen of these helper functions, so I'm just wondering if someone has a better approach than this, for example, if I could pass all the existing methods in one fell swoop instead of explicitly specifying each one.

## PARENT COMPONENT THAT I WOULD REPLACE MY MIXIN WITH

TableBase = (Component) ->

  Table = React.createClass

    isTableEmpty: ->
      @props.items.length is 0

    getStateBy: ->
      if @props.state is 'active'
        return <p>This is active</p>
      if @props.state is 'inactive'
        return <p>This is no longer active.</p>

    render: ->
      return (
        <Component 
          {...@props} 
          {...@state} 
          isTableEmpty={@isTableEmpty}
          getStateBy={@getStateBy}
          ..etc
        />
      )

module.exports = TableBase


## EXAMPLE USING IT WITH ONE OF MY TABLES
UsersTable = React.createClass

  render: ->

    ## and access my functions and props here...
    if @props.isTableEmpty()
      return <EmptyTableMsg msg='No items to show' />

    return (
      <Table striped>
        ## etc.
      </Table>
    )


buildUsersTable = TableBase(UsersTable)

module.exports = buildRacksTable
\$\endgroup\$
0

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.