如何在另一个连接的组件中使用一个连接的组件的引用

Question

我在App.js根组件中有两个名为MusicPlayer和PlayerSheet的组件。在MusicPlayer中，我有一个从react-native-video导入的Video组件，在PlayerSheet中，我有一个从react-native-raw-bottom-sheet导入的RBSheet组件。我为Video组件设置了一个参考，以便可以在PlayerSheet组件中查找视频。 我还使用了connect函数，并在MusicPlayer和PlayerSheet组件中都将其传递给{forwardRef：true}。 如何使用Redux在PlayerSheet组件中使用视频引用？

MusicPlayer.js:


class MusicPlayer extends React.Component {

    render() {
        const {music_player} = this.props;
        return (
            <Video
                ref={(ref: Video) => {
                    this.video = ref
                }}
                source={{uri: music_player.source}}
                paused={music_player.pause}
            />
        );
    }
}

const mapStateToProps = state => {
    return {
        music_player: state.music_player
    }
};

export default connect(mapStateToProps, {
    setDuration,
    setBuffered,
    setCurrentTime
}, null, {forwardRef: true})(MusicPlayer);



PlayerSheet.js:

class PlayerSheet extends React.Component {

    render() {
        const {post_info, music_player} = this.props;
        return (
            <RBSheet
                ref={ref => {
                    this.RBSheet = ref;
                }}
            >
            <View>
                <Text onPress={() => this.video.seek(100)}>seek</Text>
            </View>

            </RBSheet>
        );
    }
}

const mapStateToProps = state => {
    return {
        post_info: state.music_data.post_info,
        post_song: state.music_data.post_song,
        music_player: state.music_player,
    }
};

export default connect(mapStateToProps, {
    pause,
    play,
    setVolume,
    setCurrentIndex,
    setSource,
    refresh,
    setCurrentTime
}, null, {forwardRef: true})(PlayerSheet);