javascript - React - can I find out if a component is currently visible -
when using react, have components change on page depending on route user navigates to, there way detect if component showing? example when user on page not home page, "go home" button show, want remove when user navigates home page (its not quite simple general idea)
i'm assuming buttons child components, if have been passed event handlers. perhaps it's time flesh them out little.
class gohome extends react.component { constructor(props) { super(props); } state = { visible: "shown" } // while code here execute prior render, // assume happen during page load , after url change, // place in function serves callback // route change event. componentwillmount = () => { // please check regex. var re = /\/home/i; if (re.test(window.location.href)) { this.setstate({ visible: "not-shown" }); }; } // using google's material icons example. render () { let myclass = "material-icons " + {this.state.visible}; return ( <i classname={myclass}>home</i> ) } }
css classes.
.shown { display: block; // or inline-block, what-have-you. } .not-shown { display: none; }
essentially, css class of button different depending on current browser url.
Comments
Post a Comment