Question

我的React Native代码中有一个组件，我们称它为SliderComponent。该组件使用redux显示或隐藏，因此，它具有通过redux传递的道具isVisible。关于这个组件的事情是，它总是以滑动动画显示或隐藏。我的代码如下所示（跳过了不必要的代码片段）：

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);

是显示还是隐藏组件的实际决定是由this.state决定的，但是也传递了prop。一旦将isVisible道具设置为true，我就以隐藏状态开始了我的组件，然后将状态更改为isVisible: true，然后将其向上滑动。当我不得不隐藏它时，我先将其向下滑动，然后将this.state.isVisible设置为false。

我的问题是，我该如何合并这两个state和props，以便使我拥有isVisible的单一事实来源，并且也具有为它们设置动画？

我所做的其他阅读：https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

为动画正确使用派生状态

0 个答案: