我正在关注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>
这是我的新lib代码:
<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>
);
}
@@ Franva,我已解决此问题。此错误是由于renderOrder组件不是Transition组的直接子级引起的。您将必须将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>