Reactjs警告：未知道具'onExited'、'Aspect'、'enter'、'exit'on<；李>；标签

我正在关注韦斯·博斯的视频。在他的第22段视频中，他正在教如何使用CSSTransitionGroup制作动画

我发现它已被弃用，因此我安装了最新的库：

反应过渡基团

我发现CSSTransitionGroup已弃用，因此我安装了新的react转换组，并发现替换：CSSTransitionGroup的TransitionGroup

这是他的密码：

              <CSSTransitionGroup
                  className="order"
                  component="ul"
                  transtionName="order"
                  transitionEnterTimeout={500}
                  transitionLeaveTimeout={500}
                  >
                  {orderIds.map(this.renderOrder)}
                  <li className="total">
                      <strong>Total:</strong>{formatPrice(total)}
                  </li>
              </CSSTransitionGroup> 

{orderIds.map（this.renderroder）}

总计：{formatPrice（总计）}

以下是我的新库代码：

     <TransitionGroup
                className="order"
                component="ul">
            {/* <ul className="order"> */}
                {orderIds.map(this.renderOrder)}
                <li className="total">
                    <strong>Total:</strong>{formatPrice(total)}
                </li>
                {/* </ul> */}
             </TransitionGroup> 

{/*
*/}
{orderIds.map（this.renderroder）}

总计：{formatPrice（总计）}

{/*
*/}

UI仍然呈现，但它会向我抛出一个错误，并且在我单击X按钮后，不会删除顺序。 以下是错误消息：

    Warning: Unknown props `onExited`, `appear`, `enter`, `exit` on <li> tag. Remove these props from the element. For details, see https://facebook.github.io/react/warnings/unknown-prop.html
    in li (at Order.js:24)
    in ul (created by TransitionGroup)
    in TransitionGroup (at Order.js:56)
    in div (at Order.js:53)
    in Order (at App.js:106)
    in div (at App.js:95)
    in App (created by Route)
    in Route (at index.js:20)
    in div (at index.js:18)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:17)
    in Root (at index.js:28)

警告：标签上的未知道具`onExited`、`seen`、`enter`、`exit`。从元件上取下这些支柱。有关详细信息，请参阅https://facebook.github.io/react/warnings/unknown-prop.html
在li（订单号：24）
在ul中（由TransitionGroup创建）
在TransitionGroup中（Order.js:56）
在div中（订单号：53）
有序（见App.js:106）
在div中（在App.js:95中）
应用内（通过路由创建）
途中（在索引js:20处）
在div中（索引js:18）
路由器中（由BrowserRouter创建）
在BrowserRouter中（位于index.js:17）
在根目录中（在index.js:28处）

下面是Order.js中第24行的代码：

   if (unAvailable) {
            return (
                <li key={key}>Sorry, {fish ? fish.name : 'fish'} is no londer available~! {removeButton}</li>
            );
        }

if（不可用）{
返回(
对不起，{fish？fish.name:'fish'}无法单独使用~！{removeButton}
);
}

@Franva，我解决了这个问题。此错误是由于renderOrder组件不是转换组的直接子级造成的。您必须将total声明为一个变量，并在TransitionGroup之外使用它。下面的代码是不可执行的由于巨大的依赖性和设置，但希望能帮助您理解

const totalEl=(


总计：
{价格（总计）}


);
返回(
命令
{orderIds.map（this.renderroder）}
{totalEl}
);
@Franva，我解决了这个问题。此错误是由于renderOrder组件不是转换组的直接子级造成的。您必须将total声明为一个变量，并在TransitionGroup之外使用它。下面的代码是不可执行的由于巨大的依赖性和设置，但希望能帮助您理解


const totalEl=(


总计：
{价格（总计）}


);
返回(
命令
{orderIds.map（this.renderroder）}
{totalEl}
);

你考虑过使用Facebook自己的吗？@canaanseaton哇，我不知道。只要它有效且不被弃用，我很乐意学习和使用它~！让我知道这是否适合你：）我也有同样的问题。你能分享一下你的解决方案吗？@NeginBasiri到目前为止，我只收到作者的一封电子邮件，询问这个问题是否已经解决。我回答了，没有进一步的回答。。。。。如果你找到了解决办法，请告诉我。谢谢你考虑过使用Facebook自己的吗？@canaanseaton哇，我不知道。只要它有效且不被弃用，我很乐意学习和使用它~！让我知道这是否适合你：）我也有同样的问题。你能分享一下你的解决方案吗？@NeginBasiri到目前为止，我只收到作者的一封电子邮件，询问这个问题是否已经解决。我回答了，没有进一步的回答。。。。。如果你找到了解决办法，请告诉我。谢谢