Question

我有一个名为message.js的文件，在Render的message.js上我有一个名为<Audio>的组件。此组件用于播放Firebase上的网址中的音频，我在message.js中有此网址，我需要将此传递给我的音频，我使用了以下代码：<Audio sUrl={this.sAudioUrl} />。要在我的音频中访问此网址，请使用以下代码：this.props.sUrl。问题是：我只能在Audio类中访问url，如果我尝试在其外部使用，我收到以下错误：undefined is not an object (evaluating 'this.props.sUrl')。

我会发布Adio的代码，这样你就可以看到我在哪里使用道具，也许可以让我知道如何以不同的方式实现我需要的东西。这是代码：

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

import Sound from 'react-native-sound'

var track = new Sound(this.props.sUrl, null, (e) => {
    if (e) {
        track = null
        console.log('error loading track:', e)
    } else {

    }
})

export default class Audio extends Component<{}> {

    state = {
        bDownloaded: true,
        bDownloading: false,
        bPlaying: false
    };

    playPauseTrack() {

        if (this.state.bDownloaded) {

            if (!this.state.bPlaying) {
                this.setState({ bPlaying: true })
                track.play()
            }
            else {
                this.setState({ bPlaying: false })
                track.pause()
            }
        }
    }

    render() {

        let sImg
        if (!this.state.bDownloaded) {
            if (this.state.bPlaying) {
                sImg = require('../../../../../images/pause.png')
            }
            else {
                sImg = require('../../../../../images/play.png')
            }
        }
        else
            sImg = null

        return (
            <View style={styles.container}>

                <TouchableOpacity activeOpacity={0.8} onPress={() => this.playPauseTrack()}>
                    <Image style={{ height: 36, width: 36, resizeMode: 'contain' }} source={sImg} />
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 16,
    },
});

您可以看到我尝试使用var track上的道具。

Answer 1

了解您的问题后，您有几个选择。

第一个选项是为您的子组件提供一个ref prop，然后您可以访问该组件以获取对该组件的引用。

<Component ref='myRef'/>

然后您可以使用this.refs.myRef访问，然后您就可以获得您的课程。

另一个选择是在您的孩子中实际添加一个回调作为道具。例如：

<Component callback={this.onUrlSet}/>

之后，在您的子组件中，在设置常量后，您可以执行以下操作：

this.props.callback(sUrl);

这将执行你的父onUrlSet，你可以用你的道具做任何你需要的事情。

这不应该一直是必要的，所以想想你是否真的需要这样做。来回传递信息并不是RN的真正模式。

编辑：

关于this.props的第二个错误是因为你在组件外调用它所以this.props.sUrl不存在。在音频组件中尝试这个：

constructor(props){
  super(props);

var track = new Sound(this.props.sUrl, null, (e) => {
    if (e) {
        track = null
        console.log('error loading track:', e)
    } else {

    }
})

}

干杯

Answer 2

你没有任何sUrl道具传递给曲目。这就是它抛出错误的原因。如果您在类或外部类中使用任何道具，那么首先需要检查，它是否为空且未定义。此外，如果您使用任何道具，请确保它在使用时分配。

如何从外面的班级访问州或道具？

2 个答案: