Getting an instance of a component

Xelson

For example, I attaching my component to the HeaderPrimary.prototype:

items.add('pushedx-chat-frame', <ChatFrame />);

Then, when the component is mounted, I want to call some method in this component or change its properties this.props. But for this I need to get instance of ChatFrame class that controlling component.
It's actually possible with using m.component like this:

var chatComponent = new ChatFrame()
extend(HeaderPrimary.prototype, 'items', function(items) 
{
   items.add('pushedx-chat-frame', m.component(chatComponent));
});

And now I know that chatComponent is controller instance and then I can do some stuff like send new messages. But the problem is that in this case component is not wrapped as flarum component and fairly important lifecycle methods like config or onunload are no longer called, not to mention the unavailability of this.props in every lifecycle.
What can be done with this?

clarkwinkelmann

Xelson does ChatFrame extends flarum/Component ?

If so, you can add it like most extensions do:

items.add('stuff', YourClass.component({
    propName: propValue,
}));

Alternatively this should also work:

items.add('stuff', <YourClass propName={propValue}>);

If the question is about passing data to/from the component, maybe it's not the proper way to approach it. Consider storing the data in another global object, then have multiple components interact with that global object to modify the state of the app. The Flarum Store might be the solution, or your own custom store.

Some Flarum components are instantiated and manipulated from a parent component. I personally don't think it's a pretty way of doing it and it should probably be avoided. I can think of the Search and UserCard components. Not sure if this has anything similar to what you're trying to do.

Xelson

clarkwinkelmann I know this method to transmit props to component instance and I have already used it but this method is more suitable for initializing component, not for updating from the outside. If I have an array of components and I need to control their state from parent component it's easier to interact with their instances, not with initial props which should then be reset subsequently. Passing class instance through global variable like app.store is most suitable way but honestly this is a kludge 🙂. Ideally, If there is a component, then there is only one instance that could be available in returning object of MyClass.component() or somewhere else.

clarkwinkelmann

Xelson you can create a new class (just a basic class, not a component) that holds your state, instantiate it in the parent component, and pass it via a prop to the child component. As the object is passed by reference, calling any method or editing any property on that object will be reflected inside the child component. Same as a global object, but it doesn't really need to be global.

Xelson

clarkwinkelmann I decided that creating an additional class to control component's state is unnecessary (the comopnent itself has a state store inside its instance, moreover, you can use it to call methods) and came up with a way to get control this way:

return (
    <ChatMessage 
        id={message.id} 
        message={message.message} 
        actor={message.actorId} 
        created_at={message.created_at} 
        chatFrame={this}
        instanceGetter={((instance) => this.messages.instances[instance.id] = instance).bind(this)}
        userResolved={this.messageUserResolved.bind(this, notify)}
    />
)

In component declaration:

export default class ChatMessage extends Component
{
	init()
	{
		this.props.instanceGetter(this);
		
		...

After the component is initialized, I will access it via this.messages.instances
I consider it a solution but I'm not very happy with it. Anyway, thank you for helping.

datitisev

Xelson A few things - not sure why you are binding the instanceGetter function as arrow functions keep the same this context, so you are effectively doing nothing there.

And the way to run the instance getter would be with this.props.instanceGetter, not this.instanceGetter, unless that's a typo.

Xelson

datitisev

A few things - not sure why you are binding the instanceGetter function as arrow functions keep the same this context, so you are effectively doing nothing there.

I didn't know that. Thanks.

And the way to run the instance getter would be with this.props.instanceGetter, not this.instanceGetter, unless that's a typo.

yea, I have already adapted this in my code, I just forgot to add Object.assign(this, this.props); in my example, but the example doesn't need this. Edited.

raafirivero

I'm attempting to do something similar to the OP and need to affect an instance of a component I've already built. The component is built and added via:

extend(DiscussionComposer.prototype, 'headerItems', function (items) {
    items.add('my-items' /// this part is working fine

but now I want to change some of those items via another component I've extended:

extend(Composer.prototype, 'hide', function(e) {

I basically want to tie a specific action (getting rid of the component I built) to hiding the composer. How do I "tell" the original component to get lost when the user initiates hiding the comoposer?