loading...
Cover image for Author React Component's, like a boss.

Author React Component's, like a boss.

zoedreams profile image ☮️✝️☪️🕉☸️✡️☯️ ・2 min read

Alt Text

[ Picture courtesy of The Adventures of Business Cat, https://www.businesscatcomic.com/ ]

Be Boss!

I'' kép tš s0rt 'n unverbossly,
because it simple and powerful.


Given RComponent is <React.Component>;

<RComponent
  resource={this.state.resource}
  model={this.state.model}
/>

We want to update the model and resource when the parent component changes, propagation anyone?

Common problem, with infinite ways to do it.

Do this. Notice the added set property; which in fact is actually a function injected into a property! Now let's look at our RComponent lurking in its natural wild environment.

getRComponentContent() {
  return (
    <div id="rComponent-xxx"
      className="component r xxx">
      <RComponent
        resource={this.state.resource}
        model={this.state.model}
        set={this.setRComponent}
      />
    </div>
  );
}

setRComponent = component => {
  this.rComponent = component;
};

And in the child component class constructor, RComponent.js

export class RComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      resource: props.resource,
      model: props.model
    };
    this.props.set(this);
  }
}

Now from your parent you can access the scope of your child RComponent for. For example:

this.rComponent.setState({model:mewNodel});

Alt Text

BUT; do not fux with the props. leave those alone. You can have anythin but that.

Alt Text

You can however mess with say child objects of the props.resources ! which is crazy right..

If you read the source code of React you will understand the power of the dark side and why it will destroy all whom do not respect responsible code ;)

GL;HC
Kara

Posted on by:

zoedreams profile

☮️✝️☪️🕉☸️✡️☯️

@zoedreams

Mac girl, gamer, and programmer. <3 Unity, Graphics, Art, Techno, & Blackholes. My heroes are Einstein, Hawkin, and Sagan. If i could have any superpower, it would be the ability to control time.

Discussion

markdown guide