React 中有没有一种方法可以在道具更改时更新组件？（至少在发展过程中）

Question

我正在开发一个使用不同组件来布局页面的 React 应用程序。当我使用这些组件时，我通常会来回更改代码中的一些道具。

我想要的是，当我保存文件时，React 会看到我更改了一些道具并使用新道具重新渲染组件。现在每次都要更新页面，很烦人

示例我有这个转换组件

function Transform({size, children}) {
          return <div style={`transform: scale(${size});`}>{children}</div>
     }

我在应用程序中这样使用它

<Interface>
    <Transform size={0.25}><Grid layout={'3x4'} /></Transform>
 </Interface>

当我更改 Transform 组件上的 size 道具（只是为了测试我是否想要更大的网格）并保存文件时，React 应该重新渲染组件，因为一个道具已更改，因此它会显示不同。我怎样才能像这样设置我的工作区？非常感谢任何帮助，谢谢！（即使自动更新整个页面也很棒！）

Answer 1

我会在浏览器开发工具中检查大小并在那里更改它们，然后一旦您满意将它们应用到您的代码中在图片的左下角，您会看到 styles，然后您可以输入您想要的内容。

编辑：正如 OP 在评论中提到的那样，它只有在您想更改某些 css 属性时才可用。

Answer 2

这不是我想要的，但我认为它更好！ https://previewjs.com/

编辑：我还发现这是我原来问题的解决方案：Hot Reload is not working in my React App

Is there a way in React to update components on props change? (while developing at least)