reactjs - Access React component from this.props.children with react-router -

-

i have website following react-router , react-router-relay setup:

main.jsx:

<router history={browserhistory} render={applyroutermiddleware(userelay)}>   <route path="/:classroom_id" component={mainview} queries={classroomqueries}>     <indexroute component={start} queries={classroomqueries} />     <route path="tasks" component={taskroot} queries={classroomqueries}>       <indexroute component={tasklist} queries={classroomqueries} />       <route path="task/:task_id" component={taskview} queries={classroomtaskqueries} />       <route path="task/:task_id/edit" component={taskedit} queries={classroomtaskqueries} />     </route>   </route> </router>

the site virtual classroom, in teacher can create tasks students. these tasks can edited.

when user edits task in taskedit , hits save, changes applied , user redirected tasklist. want give user "your changes saved!" message once task edited.

i have created bootstrap alert component (<alert>) exact purpose.

for illustration purposes, assume have following mainview component (check router above):

mainview.js:

render() {   <div>     <menu />     <row>       <col md={3}>         <sidebar />       </col>       <col md={9}>         {this.props.children}  <-- start, taskroot, etc go here       </col>     </row>     <alert someprops={...} />  <-- popup component   </div> }

normally, create alert component outside of active component , pass kind of function displays alert prop active component. similar shown here.

however, works specific component. because <alert> sits @ root-level of page (along menubar, sidebar, , other things static on pages), cannot pass prop due {this.props.children}.

allow me illustrate flow want achieve once more:

  1. user saves edits task in <taskedit>.
  2. edits saved , user taken <tasklist>.
  3. immediately after, want <alert> trigger, , show message.

i've seen other solutions suggesting can clone children of react element , apply prop needed open alert, because of nature of react-router doesn't seem work.

how can accomplish above? there way component globally accessible? please note don't want recreate <alert> in each component. one such component whole dom.

simple answer:

put alert component once in top level view, use pubsub or event bus lib update it.

in alert component oncomponentdidmount function listen specific event , data , update state accordingly (visibility , message)

in task save function publish event event bus.

more advance answer:

use react flux library https://facebook.github.io/flux/docs/overview.html


Comments

Post a Comment

Popular posts from this blog

javascript - Feed FileReader from server side files -

-
i´m starting customize/improve old audio editor project. can import audio tracks canvas via drag&drop computer. thing use audio tracks stored in server clicking on list of available tracks... instead of use <input type="file"> tags. how can read server side files filereader?ajax perhaps? in advance. this code file reader: player.prototype.loadfile = function(file, el) { //console.log(file); var reader = new filereader, filetypes = ['audio/mpeg', 'audio/mp3', 'audio/wave', 'audio/wav'], = this; if (filetypes.indexof(file.type) < 0) { throw('unsupported file format!'); } reader.onloadend = function(e) { if (e.target.readystate == filereader.done) { // done == 2 $('.progress').children().width('100%'); var onsuccess = function(audiobuffer) { $(el).trigger('audiee:fileloaded', [audiobuffer, file]); ...
Read more

How to Change swipe Tab Title color in java Android -

-
by default, view pager(swipe tabs) tab title color white want change orange. can 1 me please or share if have tutorial. thanks... use style in styles.xml , assign style tab layout. <style name="mymaterialtheme.tablayout" parent="widget.design.tablayout"> <item name="tabindicatorcolor">@android:color/white</item> <item name="tabindicatorheight">3dp</item> <item name="tabtextappearance">@style/mymaterialtheme.tablayout.textappearance</item> <item name="tabselectedtextcolor">@android:color/white</item> <item name="android:background">@color/colorprimary</item> </style> <style name="mymaterialtheme.tablayout.textappearance" parent="textappearance.design.tab"> <item name="android:textsize">14sp</item> <item name="android:textcolor">@color/tab_text_inactive</item> ...
Read more

Using globs in Perl replace one liner in TCL script -

-
i want run 1 perl 1 liner in tcl script below: exec perl -i -pe {s/substring/replacing_string/g} testfile; this works fine. but, if want modify files below: exec perl -i -pe {s/substring/replacing_string/g} *; it gives me error message: can't open '*': no such file or directory. while executing exec perl -i -pe {s/substring/replacing_string/g} *; i tried bracing '*', did not solve problem. requesting help... assuming files a , b , , c present in current working directory, executing echo * in shell prints a b c . because shell command evaluator recognizes wildcard characters , splices in list of 0 or more file names wildcard expression found. tcl's command evaluator not recognize wildcard characters, passes them unsubstituted command invoked. if command can work wildcards so. exec command doesn't, means pass wildcard expression shell command named command string. testing this, get % exec echo * * because asked shell exe...
Read more