我正在关注 Wes Bos 的 Reactjs 视频。在他的第 22 个视频中,他正在教如何使用 CSSTransitionGroup 做动画。
我发现它已被弃用,所以我安装了最新的库:
反应过渡组
.
我发现 CSSTransitionGroup 已被弃用,所以我安装了新的 react-transition-group,我发现替代品: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>
这是我使用新库的代码:
<TransitionGroup
className="order"
component="ul">
{/* <ul className="order"> */}
{orderIds.map(this.renderOrder)}
<li className="total">
<strong>Total:</strong>{formatPrice(total)}
</li>
{/* </ul> */}
</TransitionGroup>
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)
这是 Order.js 中第 24 行的代码:
if (unAvailable) {
return (
<li key={key}>Sorry, {fish ? fish.name : 'fish'} is no londer available~! {removeButton}</li>
);
}