我跟随Wes Bos的Reactjs视频。在他的第22个视频中,他正在教授如何使用CSSTransitionGroup来做动画。
我发现它已被弃用,所以我安装了最新的lib:
反应器尾组
我发现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>
用户界面仍会渲染,但是在我点击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>
);
}
答案 0 :(得分:0)
@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>