Clever Geek Handbook

Best sample for relaying my responsive component?

I have a global object data

that I update and then call React.renderComponent () again on the top / main component.

Is this the correct template to run this update? I'm a little lost. Thank!

+3


source to share


3 answers


Typically you should pass a data object to a component as a prop, even if it is a global variable. This allows you to test the component and also use it elsewhere without being bound to this global.

As Mike said, there is nothing wrong with using React.renderComponent to update it.



He also mentioned flux, but that's overkill for that. Simplest random emitter where you do something like .emit('change', newData)

and the component that listens to the change event tends to be better for simpler cases. See my answer to this question for an example of how this can be done.

+4


source


This is the correct pattern. React.renderComponent

will either mount the component for the first time, or update an already mounted component.

If you are using a global object, you can look at architecture here Flux

:



http://facebook.github.io/flux/docs/overview.html

+3


source


I had the same problem and asked myself if I really needed to redo the component.

You can do this with this.forceUpdate()

, but this is not recommended. Since the React docs state :

You should try to avoid all uses of forceUpdate () and only read from this.props and this.state in render (). This makes your component "clean" and your application much simpler and more efficient.

So, I created a property data

like exists

and tested it:

// renderDeleteButton() is being called on render()
renderDeleteButton () {
  if (!this.props.store.exists) {
    return;
  }

  return(
    <DeleteButton
      ...
      deleteAction={this.delete} />
  );
}

Whenever I delete / save, I switch exists

and the component will show or hide based on that. React handles this for me.

0


source






More articles:


All Articles