logo标签列表

呈现React组件预览

javascriptcssreactjsreact-reduxstyled-components
4
今天我有以下问题：我有一个表单来设置组件的标题、背景颜色、按钮背景和文本颜色等，并且我希望在用户更改设置时呈现该组件的预览。 问题是，我想渲染组件的“预览”，假设在表单旁边放置一个小视口（或像缩小一样），这样用户可以在更改组件的样式时预览组件。 文本的可读性并不重要，我想做的唯一一件事就是向用户展示组件在保存新设置后将如何更改。

enter image description here

这是一个表单，我希望能在表单旁边呈现组件的预览（缩小显示）。

有什么想法吗？

谢谢。

不确定你是想自己构建这个，还是只是想找一些能帮助的东西，但是React Storybook可能值得一试。 - aug
1个回答
3

为什么不使用CSS transform scale？

大致如下：

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

https://codesandbox.io/s/o5w0588ymq

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接