Skip to content

Instantly share code, notes, and snippets.

@whichsteveyp
Forked from iammerrick/children-as-function.js
Last active May 25, 2016 02:11
Show Gist options
  • Save whichsteveyp/9ddf59d06fc608c13829cfd51b3083a5 to your computer and use it in GitHub Desktop.
Save whichsteveyp/9ddf59d06fc608c13829cfd51b3083a5 to your computer and use it in GitHub Desktop.
Which API do you prefer? Passing a function into the Ratio component or making a higher order component called Ratio you can use to configure a component.
// parent A wants to show a list
<GetLastNImagesOfType type="jpg" numImages={10}>
{(images) => {
return images.map(image => <span>{image.name}</span>)
}}
</GetLastNImagesOfType>
// parent B wants to show the images themselves
<GetLastNImagesOfType type="jpg" numImages={10}>
{(images) => {
return images.map(image => <img src={image.src} />)
}}
</GetLastNImagesOfType>
@iammerrick
Copy link

Couldn't you do this with GetLastNImagesOfType(Component, { type: 'jpg', num: 10 }) and pass image as property to component?

@iammerrick
Copy link

@sprjr Thank you by the way for taking the time to explain this to me.

@whichsteveyp
Copy link
Author

whichsteveyp commented May 25, 2016

@iammerrick sure, no worries. The issue that would not be resolved is other things from the parent at time of render. This could be anything really, an example would perhaps be localizing:

  {(images) => {
    return images.map(image => <img src={image.src} alt={this.props.localize(image.alt)} />)
  }}

or attaching a ref:

// on the class
setImageRef(component) {
  // here we have a ref to the component, not to the HOC
  // if the HOC were to set a ref, it would be the owner
},

// down in render
  {(images) => {
    return images.map(image => <img src={image.src} ref={(c) => this.setImageRef(c)} />)
  }}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment