Question

我是React CSS Transition Group的新手，但我想我会尝试一下，只是使用他们自己网站上的示例。所以基本上我是这样的：

反应：

import React, { memo, useState } from "react";

import "./style.styles.scss";
import { CSSTransition } from 'react-transition-group'

const App= ( ) => {

    const initialCount = 0
    const [count, setCount] = useState(initialCount)

    const components = [
        <CSSTransition in={count} timeout={200} classNames="my-node">
        <div className="box">
            <div>DIV1</div>
            <div className="button" onClick={() => setCount(count + 1)}>
                Next</div>
            </div>
        </div>
        </CSSTransition>,
        <CSSTransition in={count} timeout={2000} classNames="my-node">
        <div className="box">
            <div>DIV2</div>
            <div className="button" onClick={() => setCount(count - 1)}>
                Prev</div>
            </div>
            <div className="button" onClick={() => setCount(count + 1)}>
                Next</div>
            </div>
        </div>
        </CSSTransition>
    ]

    return (

        <div>
            {components[count]}
        </div>
    );
};

export default memo(App);

CSS：

.my-node-enter {
    opacity: 0;
    transition: opacity 2000ms;
}

.my-node-enter-active {
    opacity: 1;
    transition: opacity 2000ms;
}

.my-node-exit {
    opacity: 1;
    transition: opacity 2000ms;
}

.my-node-exit-active {
    opacity: 0;
    transition: opacity 2000ms;
}

因此，我尝试有两个具有不同内容的div，初始状态是打开/显示第一个div DIV1，然后单击“ Next”时，我进入下一个div {{ 1}}，可以在计数状态之间切换。现在，这是可行的，但它们只是显示而没有动画消失。然后，我看到了这个用于React的CSSTransition，它似乎能够很轻松地完成此动画工作。但是我有点卡在上面的例子中（取自他们的网站）。很明显，问题出在CSSTransition中的DIV2表达式上，它表示“类型{number}不能分配给布尔类型”。因此，这可能是因为它期望一个true / false语句。所以我的问题是：如何将其转换为“计数”。我想我可能需要某种if语句，例如：“ if count == 0 then”。但是由于我是React的新手，所以我不确定在这种情况下这是如何工作的？

反应CSSTransition“类型{number}不能分配给布尔类型”

0 个答案: