Reactjs警告：在<li>标签上出现未知属性`onExited`，`appear`，`enter`，`exit`

Question

我正在跟随Wes Bos的Reactjs视频学习。在他的第22个视频中，他教授如何使用CSSTransitionGroup进行动画效果。

我发现它已经过时了，所以我安装了最新的库：

react-transition-group。

我发现CSSTransitionGroup已经过时了，所以我安装了新的react-transition-group，并发现它的替代品：TransitionGroup取代了CSSTransitionGroup。

以下是他的代码：

              <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> 

这是我的代码，使用了新库：

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

界面仍然可以呈现，但在我点击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)

以下是 Order.js 文件中第 24 行的代码：

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

- Franva

---

你考虑过使用Facebook自己的ReactCSSTransitionGroup吗？ - canaan seaton

@canaanseaton 哇，我不知道呢。只要它能工作且未被弃用，我很乐意学习和使用它~！ - Franva

如果那对你有用，请告诉我 :) - canaan seaton

我有同样的问题。如果已经解决了，你能否分享一下你的解决方案？ - Negin Basiri

我收到了这样的回复：“转换组件需要是转换组的直接子元素。” 这解决了警告问题... 但是当行添加/删除时，我仍然无法获得淡入淡出动画。 - Negin Basiri

Answer 1

@Franva，我解决了这个问题。这个错误是因为renderOrder组件不是Transition group的直接子级所导致的。你需要声明一个total变量并在TransitionGroup外部使用它。由于有大量依赖和设置，下面的代码无法执行，但希望能帮助你理解。

 const totalEl = (
      <ul className="order">
        <li className="total">
          <strong>Total:</strong>
          {formatPrice(total)}
        </li>
      </ul>
    );

    return (
      <div className="order-wrap">
        <h2>Order</h2>

        <TransitionGroup className="order" component="ul">
          {orderIds.map(this.renderOrder)}
        </TransitionGroup>

        {totalEl}
      </div>
    );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

- nywooz