使用关键道具强制重新渲染

Question

我有一个组件，其中有可拖动组件，其中拖放操作应用了平移，默认渲染时根据父级的高度和宽度渲染以保持比例。

当我调整窗口大小时，父组件会更改大小，因此内部组件必须重新渲染以根据父大小重置默认转换。我将大小道具传递给孩子的，但是他们不会重新渲染，我相信这是因为翻译是直接在style属性中完成的。

因此，我做了一个技巧来强制重新渲染，我将道具key传递给包装器，该包装器的值是高度乘以一个宽度，该宽度成为唯一键，更改大小后重新渲染组件正确的默认位置。外观如下：

render() {
  const { height, width, frame, elem } = this.state;
  const key = height * width;

  return (
    <WrapperFrame>
      <WrapperMediaElem key={frame.id}>
        <WrapperElements key={key} className="droppable" size={{height, width}}>
          <DraggableElement element={{...elem}} size={{height, width}} />
        </WrapperElements>
      </WrapperMediaElem>
    </WrapperFrame>
  );
}

此解决方案对我有用，但看起来像个“把戏”，也许不是好方法。我想知道这是正确的方法还是有更好的解决方案？