javascript - React/Flux 实现技术不清楚父组件何时需要在子组件上拉字符串

Question

我遇到了一个不太人为的情况，我在使用 React 最佳实践实现它时遇到了麻烦。特别是它会产生此错误:

Uncaught Error: Invariant Violation: setProps(...): You called setProps on a component with a parent. This is an anti-pattern since props will get reactively updated when rendered. Instead, change the owner's render method to pass the correct value as props to the component where it is created.

情况是这样的。父级包含一个子组件。父组件具有用于 UI 的事件处理程序，并且为了使行为起作用，子组件内部的某些内容需要通过对高度样式的 CSS 更改来呈现其 HTML。这就是问题所在，通常信息向上流动或保持不变，但在这里我需要改变 child 的某些东西。

父组件(Widget)呈现这个:

<div class="Widget">
  <div class="WidgetGrabBar" onMouseDown={this.handleMouseDown}>
  <WidgetDetails heightProp={this.props.detailsHeight} />
</div>

还有我在 Widget 的其他地方

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 the prop! I need to send an urgent package of information to my child!! jQuery or findDOMElement() followed by DOM traversal is forbidden!!!
    this.setProps({
      detailsHeight: this.props.detailsHeight + e.deltaY
    });
  }                                                                                        
},                                                                                    

我有 WidgetDetails' render() 呈现如下内容:

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

我认为推出 jQuery 来获取 .WidgetDetails 来摆弄它的 style attr 是错误的，非 React解决它的方法。真正的反模式。

但现在我被告知不能更改 Prop 。或者我必须扔掉包括洗澡水在内的所有东西才能拥有新的 Prop 。我没有那样做；我的 Prop 包含详细信息项目的内容。制作另一个全新的副本可能很昂贵。

我正在尝试让 React 参与此渲染工作以放入新的高度。我应该怎么做呢？这个错误基本上是在强制 Props 现在应该是不可变的吗？错误告诉我，我必须在组件链的更上层涉及这个高度。可以想象，我可以通过上面的回调来做到这一点，但这感觉很不对。我需要向下而不是向上传递信息。

也许我应该使用state。但是更改 state 会强制渲染父组件 Widget。那不是我想要的。 DOM 中只有一个地方需要重新渲染，即 child 组件的 div 的 style 属性。

Answer 1

有两种方法。要么

1. 调用父级的处理程序。然后将新的 Prop 通过 props 传递给 child 。如果我没记错的话，这就是 React hello world 教程采用的方法。
2. 通过 setState 在 View 中改变状态。

在您的情况下，方法 2 似乎确实有意义。您基本上是在尝试跟踪 View 数据。

顺便说一句，永远不要直接更新状态。使用设置状态。 reacts virtual dom 的全部意义在于它针对虚假更新进行了优化，所以你会没事的。如果您需要更好的控制，还有生命周期方法 componentShouldUpdate。

为了完整起见，我应该补充一点，还有第三种使用全局存储的方法。这就是 react 通量所增加的。但同样，在您的情况下，这可能已经结束了。