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.
Original Thread: https://github.com/meteor/react-packages/issues/228 .