你如何将道具传递给反应运动风格的组件？

Question

问题

我有一些代码可以使用。我想在一个新项目中使用这段代码，但由于更新了 create-react-app (npx)、styled-components 或 framer-motion；此方法不再有效。

以前的工作

这是用来工作的代码：

const StyledMotionComponent = motion(
    styled.div((props) => ({
        transform: props.scale,
        position: "absolute",
        top: "0",
        right: "0",
        bottom: "0",
        left: "0",
        display: "flex",

        justifyContent: "center",
        alignItems: "center",
        zIndex: "-1",
    }))
);

然后我可以传入这样的值：

<StyledMotionComponent scale="0.2" />

问题

那么如何使用当前版本的 npx create-react-app ./(react ^17.0.2)、当前版本的 framer-motion(^5.5.5) 和当前版本的 styled-components 重新创建它(^5.3.3).

我尝试解决问题失败

const StyledMotionComponent = (props) => {
    styled(motion.div)`
        transform: props.scale;
        position: "absolute";
        top: "0";
        right: "0";
        bottom: "0";
        left: "0";
        display: "flex";
        justify-content: "center";
        align-items: "center";
        z-index: "-1";
    `;
};


const StyledMotionComponent = motion((props) => {
    return styled.div`
        transform: props.scale;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;

        justify-content: center;
        align-items: center;
        z-index: -1;
    `;
});

const StyledMotionComponent = styled(motion.div).attrs((props) => ({
    initial: { scale: props.scale },
}))`
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
`;

最后一个有效，但动画非常紧张。似乎占用了太多内存。

Answer 1

最后几次尝试你真的很接近了。这就是您要找的：

const StyledMotionComponent = styled(motion.div)`
    transform: scale(${({scale}) => scale});
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
`;

任何尝试做类似 () => styled 的事情都会很慢，因为它会一遍又一遍地创建样式实例。

这是这个工作的一个（新）例子 https://codesandbox.io/s/framer-motion-styled-component-and-motion-combination-llmm3

你如何将道具传递给反应运动风格的组件？

How do you pass props to a react motion styled component?

reactjs

styled-components

framer-motion