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\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.