meteor / react-packages

Meteor packages for a great React developer experience
http://guide.meteor.com/react.html
Other
574 stars 159 forks source link

Better implementation of createContainer #228

Closed robertpitt closed 3 years ago

robertpitt commented 7 years ago

Hello,

I am wondering what people think of wrapping create container in a react component to allow for a cleaner usage, I feel as though using createContainer outside a class and having a function that's not part of your component to specify what data is required for the component is somewhat segmented.

so I have been trying to figure out a cleaner way to use createContainer in my project and I have come up with something that I personally feel is a better what to use createContainer.

My approach was to use a React.Component to allow me to pass data to sub components.

I create a component that wraps the child component and use the render function to wrap the child in a container using the top level scope to control the data requirements.

import React, { Component } from 'react';
import {createContainer} from "meteor/react-meteor-data";

/**
 * Wrap a child render a child component that has been connected with a data
 * context. 
 */
export default class DataContainer extends React.Component {
  render() {  
    return React.createElement(
      createContainer(this.props.context.handle, this.props.children.type)
    );
  }
}

This simple component will allow cleaner usage IMO for developers, here's an example usage

import React, { Component } from 'react';
import DataContainer        from '/imports/ui/DataContainer'

export default class HomepageContainer extends Component {

  /**
   * Subscribe and Return required data
   * @type {Object}
   */
  _getMeteorData() {
    return {
      user: Meteor.user()
    }
  }

  /**
   * Render Function
   */
  render () {
    return (
      <DataContainer handle={this._getMeteorData}>
          <HomepageView />
      </DataContainer>
    )
  }
}

Inside the HomepageView the props file will be populated by the data returned by _getMeteorData, and will reactively re-render HomePageView when the data changes

This is just a working POC to demonstrate the implementation / API.

What do you guys think, is this better than using createContainer, can yo usee any issues with doing this?

Regards.

abernix commented 7 years ago

I think this is very much worth discussion but this repository doesn't get a lot of direct visits so it likely isn't the right place for it. I think to rally some opinions about this, you should consider raising this question on the Meteor Forums in the react category!

filipenevola commented 3 years ago

I'm closing this just because it's too old. We can open new issues for items that are still valid.

Most of these items were solved already or replaced by new strategies (like hooks)