reactjs - 姿势元素的子元素不响应姿势变化

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）。用 argb(r,g,b)代替它会使姿势起作用。