Reactjs 正确使用动画的派生状态

我的React原生代码中有一个组件，我们称之为

SliderComponent

。该组件使用redux显示或隐藏，因此它有一个prop

isVisible

通过redux传递给它。这个组件的特点是，它总是通过滑动动画显示或隐藏。我的代码如下所示（跳过不必要的代码片段）：

class SliderComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
//我正在创建“isVisible”状态，因为我需要动画
//控制组件的实际显示/隐藏的步骤
isVisible:false
}
}
showBySliding（）{
这是我的国家({
可见：正确
});
//启动动画
}
隐藏的{
//首先滑动零部件并将其隐藏
//然后执行此操作。setState（{isVisible:false}）；
//在动画回调中
}
组件将接收道具（下一步）{
if（this.props.isVisible！==nextrops.isVisible）{
如果（nextrops.isVisible）{
这是showBySliding（）；
}否则{
这个。隐藏的（）；
}
}
}
render（）{
如果（！this.props.isVisible）{
返回null；
}
//具有组件渲染逻辑
//例如，在此模式中，实际决定是否显示
//或者隐藏实际上是由这个状态决定的！
返回；
}
}
常量mapStateToProps=（）=>{
//读取状态并确定组件是显示还是隐藏
返回{
//这也可能是错误的
可见：正确
}
};
导出默认连接（MapStateTops）（滑块组件）；

是否显示或隐藏组件的实际决定由

this.state

执行，但也传递了

prop

。一旦我将

isVisible

属性设置为true，我就将组件设置为hidden，然后将状态更改为

isVisible:true

，并将其向上滑动。当我必须隐藏它时，我首先将其向下滑动，然后将

this.state.isVisible

设置为

false

我的问题是，我如何整合这些

状态

和

道具

，以便对

可见

有一个单一的真实来源，并且能够正确地设置它们的动画

---

我做过的其他阅读：

您正在使用

组件将接收道具

但请求派生状态。。。有点不清楚你想要什么…@bhojendraauniyar我正在使用

component willreceiveprops

检测

this.props.isVisible

中的更改，然后设置实际显示或隐藏组件的

状态。这被认为是一种反模式，正如这篇文章中提到的：那么你的问题是什么？询问如何用派生状态替换将收到的道具？@bhojendraurauniyar如果我不够清楚，我很抱歉。我在问，我怎么能完全依靠状态或道具来决定我的组件是否应该可见。这没有错。我们可以依靠道具，否则我们怎么能依靠接受道具呢？
class SliderComponent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            // I am creating `isVisible` state because I want the animations
            // to control the actual showing/hiding of the component
            isVisible: false
        }
    }

    showBySliding() {
        this.setState({
            isVisible: true
        });

        // Start the animation
    }

    hideBySliding() {
        // First slide the component and hide it
        // then do this.setState({ isVisible: false });
        // in the animation callback
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.isVisible !== nextProps.isVisible) {
            if (nextProps.isVisible) {
                this.showBySliding();
            } else {
                this.hideBySliding();
            }
        }
    }

    render() {
        if (!this.props.isVisible) {
            return null;
        }

        // Have the component rendering logic
        // Example, in this modal, the actual decision of whether to show
        // or hide is actually determined by this.state!
        return <Modal
                visible={this.state.isVisible}
            />;
    }
}

const mapStateToProps = () => {
    // read state and decide if component is shown or hidden
    return {
        // This can be false as well
        isVisible: true
    }
};

export default connect(mapStateToProps)(SliderComponent);