我正在开发一个 Reactjs + React-motion 项目,在一个“模态窗口”(比方说)我想动态安装或加载一个组件,如果可能的话?
到目前为止我的解决方案:我找不到方法,所以似乎更容易将组件放置到位并隐藏它,然后在状态更改时切换类或样式,显示隐藏的组件并且仅在“模态窗口”过渡完成。
在下面分享一些代码,这样更容易理解我想要做什么。没有事件处理程序,大部分代码都被删除了,但是onRest
(动画完成时的事件回调被暴露)以及渲染 fn。
class HomeBlock extends React.Component {
constructor (props) {
...
}
...
motionStyleFromTo () {
return {
...
};
}
onRest () {
// this is triggered when the Motion finishes the transition
}
render () {
return (
<Motion onRest={this.onRestCallback.bind(this)} style={this.motionStyleFromTo()}>
{style =>
<div className="content" style={{
width: `${style.width}px`,
height: `${style.height}px`,
top: `${style.top}px`,
left: `${style.left}px`
}}>
[LOAD COMPONENT HERE]
</div>
}
</Motion>
);
}
}
export default HomeBlock;