渲染反应组件预览答案

【问题标题】：Render react component preview渲染反应组件预览
【发布时间】：2018-01-16 01:38:58
【问题描述】：

今天遇到以下问题：我有一个表单来设置组件的标题、背景颜色、按钮背景和文本颜色等，我想在用户更改组件时呈现该组件的预览设置。

问题是，我想渲染组件的“预览”，假设在表单旁边的一个小视口中（或者像缩小一样），这样用户就可以在他（或她）的同时预览组件) 正在改变组件的样式。文本的可读性并不重要，我唯一想做的就是让用户了解保存新设置后组件将如何更改。

表单就是这样，我想在表单旁边呈现组件的预览（缩小）。

有什么想法吗？

谢谢。

【问题讨论】：

【解决方案1】：

为什么不使用 css 变换比例？

大概是这样

const Test = styled.div`
  ${props => props.preview && `
    transform: scale(0.5);
  `};
`;

【讨论】：