Question

随着AnimDiv变量的改变，

pose似乎没有改变其样式。同样的方法也适用于父级，但是子级似乎只采用传递给其pose的所有内容的初始值，然后不在乎后续的重新渲染。

为什么会这样？

const AnimDiv = posed.div({
    red: {
        backgroundColor: "red"
    },
    blue: {
        backgroundColor: "blue"
    }
});

const AnimationTest = () => {
    const [pose, setPose] = useState("red");
    return (
        <div
            className="animated"
        >
            <AnimDiv
                style={{ position: "absolute", height: "20px", width: "20px" }}

                onClick={() => setPose(x => (x === "blue" ? "red" : "blue"))}
                pose={pose} // only the value from the initial render matters; you may change the pose state variable, but the element will not adjust its style
            ></AnimDiv>
        </div>
    );
};

编辑：它确实响应姿势变化，但是由于任何原因它都不会切换背景。例如，不透明度起作用。

Answer 1

对于background-color，值be不能是彩色文字（例如red）。替换为rgb(r,g,b)即可构成姿势。

姿势元素的孩子不响应姿势变化

1 个答案: