5 ms·
I'm currently using React with ClojureScript/Om and I really like working with it. However I'm never really sure how to model non-persistent ui changes. I.e. a
by terhechte 12y ago
I'm currently using React with ClojureScript/Om and I really like working with it. However I'm never really sure how to model non-persistent ui changes. I.e. a user clicks a button that sets the display property of the target note to "block" so that more content is visible. I wouldn't want to keep this in the main store. So I'm pondering whether to store this in component local state and have the change appear with a React rerender, or whether it is fine to simply access the DOM and set a different style property? (i.e. getElementById...)
- wingspan 12y agoNo! Never access the DOM directly if you can help it. I forgot to mention, display things like you said are one of the only places we really use local state. A dropdown for instance, might have a state called "isOpen". In your click handler, you'd call this.setState({isOpen: true}), and in render, you'd only render the dropdown if isOpen is true.
- terhechte 12y agoThanks, totally makes sense now that I think about it. I just removed the offending code and set up a proper local state for it.
- underwater 12y agoYou shouldn't be accessing the DOM unless you absolutely need it (e.g. get clientHeight on a node). Use state instead: _handleClick: function() { this.setState({expanded: true}); }, render: function() { return ( <div className={this.state.expanded ? 'expanded' : 'compact'}> <button onClick={this._handleClick} /> </div> ); }