javascript - tab containers in ReactJS: only render selected child vs. using `display:none` -


i built simplistic tab container in reactjs using idea container component keeps in state integer index denoting tab pane display , renders child (from this.props.children array) found @ index position.

the gist of approach was:

const tabcontainer = react.createclass({     props: {         tabnames: react.proptypes.arrayof(react.proptypes.string).isrequired     },     getinitialstate: function() {         return {             activeindex: 0         };     },     settab: function(n) {         this.setstate({activeindex: n});     },     render: function render() {         const childtorender = this.props.children[this.state.activeindex];         return (                 <div classname='tab-container'>                 <tabs                     tabnames= {this.props.tabnames}                     active  = {this.state.active}                     settab  = {this.settab}                 />                 <div classname='tab-pane'>                 {childtorender}                 </div>                 </div>         );     } });

i.e. indexed child selected , rendered (i've omitted sake of simplicity code handling edge case this.props.children not array).

i found out approach unsatisfactory when user selected different tabs, component corresponding pane render mounted , unmounted repeatedly , state panes had not preserved.

ultimately, used approach in children rendered , panes, except selected one, assigned class hidden used style panes as: display:none. when later solution used panes remained mounted after user clicked through various tabs , state had wasn't lost user cycled through tabs.

my questions are:

  1. was initial approach (where specific child rendered) anti-pattern or there other mechanism have used preserve state of individual panes or prevent them being unmounted?
  2. if initial approach indeed anti-pattern how can anti-pattern expressed more generally?

i don't think initial approach antipattern @ all. choosing whether or not mount/unmount in logic dependent on circumstances. if want state preserved, don't unmount. if want fresh element, complete call getinitialstate, unmounting right way go.

as easy counterexample, consider react-router. router unmounts/remounts components on route change. , route changing higher order of tabbing.

but given situation want state preserved, think solution proper one. might want take @ material-ui, similar in tabbing: https://github.com/callemall/material-ui/blob/master/src/tabs/tabtemplate.js


-

Popular posts from this blog

Apache NiFi ExecuteScript: Groovy script to replace Json values via a mapping file -

i working apache nifi 0.5.1 on groovy script replace incoming json values ones contained in mapping file. mapping file looks (it simple .txt): header1;header2;header3 a;some text;a2 i have started following: import groovy.json.jsonbuilder import groovy.json.jsonslurper import java.nio.charset.standardcharsets def flowfile = session.get(); if (flowfile == null) { return; } flowfile = session.write(flowfile, { inputstream, outputstream -> def content = """ { "field1": "a" "field2": "a", "field3": "a" }""" def slurped = new jsonslurper().parsetext(content) def builder = new jsonbuilder(slurped) builder.content.field1 = "a" builder.content.field2 = "some text" builder.content.field3 = "a2" outputstream.write(builder.toprettystring().ge...
Read more

node.js - How do I prevent MongoDB replica set from querying the primary? -

read-operations-only: is there way have mongodb replica set, make mongodb instance on box connected to, mongodb gets queried? i have 3 ec2 instances behind aws load balancer. on each ec2 instance runs mongodb, part of replica set. i have express endpoints on nodejs , connect replica set follows mongodb.mongoclient.connect('mongodb://1.1.1.1,2.2.2.2,3.3.3.3.', function (err, db) { if (err) { complete('{}'); } else { i distribute load of queries evenly across 3 instances of mongodb replica set instead of default having queries routed ec2 instance primary mongodb defined, because destroys point of load balancer (which balance load of queries across 3 instances evenly). my understanding when connecting mongodb replica set, primary instance selected unless primary instance down, , therefore purpose of every secondary instance serve backup. in example people call hot,cold,cold. because there 2...
Read more