javascript - React/Flux implementation technique is unclear for when a parent component needs to pull strings on child component -

i have situation isn't contrived, , i'm having trouble implementing using react best practices. in particular produces error:

uncaught error: invariant violation: setprops(...): called setprops on component parent. anti-pattern since props reactively updated when rendered. instead, change owner's render method pass correct value props component created.

the situation this. parent contains child component. parent has event handlers ui , behavior work, inside child component needs render html css change height style. therein lies wrinkle, information flows upward or stays put, here need change in child.

parent component (widget) renders this:

<div class="widget">   <div class="widgetgrabbar" onmousedown={this.handlemousedown}>   <widgetdetails heightprop={this.props.detailsheight} /> </div> 

and elsewhere in widget i've got

componentdidmount: function() {    document.addeventlistener('mousemove', this.handlemousemove);   document.addeventlistener('mouseup', this.handlemouseup); }, componentdidunmount: function() {   document.removeeventlistener('mousemove', this.handlemousemove);   document.removeeventlistener('mouseup', this.handlemouseup); },        <...>  handlemousedown: function(e) {                                                      e.preventdefault();    this.props.actuallydragging = true;                                                    }, handlemouseup: function(e) {   this.props.actuallydragging = false; },        handlemousemove: function(e) {   e.preventdefault();   if (this.props.actuallydragging) {     // update prop! need send urgent package of information child!! jquery or finddomelement() followed dom traversal forbidden!!!     this.setprops({       detailsheight: this.props.detailsheight + e.deltay     });   }                                                                                         },                                                                                     

and had widgetdetails' render() render like:

<div class="widgetdetails" style={height: this.props.heightprop}>    {detail_items_move_along_nothing_to_see_here} </div> 

i figured rolling out jquery grab .widgetdetails fiddle style attr wrong thing, non-react way go it. real anti-pattern.

but i'm being told can't change props. or have throw out including bathwater in order have new props. i'm not doing that; props contain contents of detail items. maybe expensive make entirely new copy of this.

i'm trying let react participate in rendering work put new height in. how supposed this? error enforcing props supposed immutable now? error telling me have involve height farther on component chain. can conceivably callback above, feels wrong. need pass information downward, not upward.

maybe i'm supposed use state. changing state forces widget, parent component render. not desire. 1 singular place in dom needs re-render, child component's div's style attr.

there 2 approaches. either

1. call handlers on parent. pass new props child via props. if recall correctly, that's approach react hello world tutorial takes.
2. mutate state in view via setstate.

in case, seems approach 2 makes sense. trying track view data.

never, way, update state directly. use setstate. whole point of reacts virtual dom it's optimized spurious updates, fine. there life cycle method componentshouldupdate in case want finer control.

for completeness should add there's third way of using global store. that's react flux adds. again, in case that's on kill.