How to render component from variable and save props and context?

Question

I'm creating several React Components that behave in the same way except of rendering data. I put similar logic into mixin, including render function. The only thing I pass is the additional component that is responsible for presenting data in required way.

var A = React.createClass({
    mixins: [MyMixin],
    MyComponent: B,

});

var B = React.createClass({
    get_value: function() {
        // should return some value using top-level context
    },

    render: function() {
       var x = this.get_value()
    }
})

MyMixin = {
   // some logic
   render: function() {
       <div>
           // some common markup
           <this.MyComponent
             // some props
           />
       </div>
   }
}

The problem here is that component B (which is rendered through variable in mixin) doesn't have top-level context, from parents. At the same time components in the 'common markup' block does have it. How could I render components in the way above and save top-level context?

Jarno Lonardi · Accepted Answer · 2015-11-10 16:58:37Z

1

You can't access the top level context because B is not inheriting or sharing anything with A. Your mixin is just a simple extension of shared functionality and you just render component defined in component A. There is nothing that binds A and B.

What you could do is pass the needed stuff in the props of B.

<div>
    // some common markup
    <this.MyComponent
         parentProps={this.props}
         parentState={this.state}
    />
</div>

What you really should do is add all the common code in the mixin and use that mixin in both of your components. Since render is NOT common for your components you should define the render in each component or make an other mixin for that purpose.

edited Nov 10, 2015 at 16:58

answered Nov 10, 2015 at 16:46

Jarno Lonardi

4062 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AskhatOmarov Over a year ago

Actually A and B does not have common code to paste it to mixin. To be more precise, there are A and, lets say, A2, which have same behaviour, which is on mixin. Moreover, they render in the similar way (I mean, headers, some form above and so on), except one piece that represents data. In fact, A represents it through B, and A2 is with B2, that's why I want to pass the required component through variable, and left render function in mixin.

Collectives™ on Stack Overflow

How to render component from variable and save props and context?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related