React native 将本机传递数据反应到另一个组件

我对React Native很陌生，正在尝试构建Messenger应用程序，我有两个组件：搜索和Messenger​. 我正在努力将从搜索中获得的数据传递给Messenger

搜索组件发现用户（接收者）和我是发送者，我想进行通信，但在搜索中找到用户后，我想将该用户传递给Messenger，以便我可以与在

组件中找到的特定用户聊天

此外，搜索组件具有显示用户日历等的视图。。因此，理想情况下，我不想在render（）搜索方法中使用

，因为它会在搜索组件中包含Messenger组件功能，这会破坏

组件的用途

所以我的代码是：

'use strict';


var Search = React.cerateClasss({

getDefaultProps: function () {
    return {
        date: new Date(),
        singerName:''
    };
},
getInitialState: function () {
    return {
        date: this.props.date,
        artistName: '',
        artistUserId: 1,
        maxNoArtist: 0,
        imagePath: '../common/images/1.png',
        user: null
    }
},
getArtistName: function () {
    var artist = [];
    var query = new Parse.Query(Parse.User);
    query.equalTo('userId', this.state.artistUserId);
    return query.first({
        success: (result) => {
            this.setState({artistName: result.get('name')});
            this.props.singerName= result.get('name');
            this.setState({imagePath: result.get('image').url()});
        },
        error: (data, error) => {
            console.log('Error occured : ' + error.message())
        }
    });
},
render: function () {
    if (!this.state.user) {
        return <View style={styles.container}>
            <Text style={styles.label}> Loading.... </Text>
        </View>
    }
    var username = this.state.user.get('username');


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

            <ResponsiveImage source={{uri:this.state.imagePath}} initHeight="200" initWidth="400"/>


            <Text style={styles.label}>
                {this.state.artistName}
            </Text>

            <View style={styles.innerButtonView}>
                <Button text={'Onki'} onPress={this.getPreviousArtistName}/>
                <Button text={'Indiki'} onPress={this.getNextArtistName}/>
            </View>

            <CalendarPicker
                selectedDate={this.state.date}
                onDateChange={this.onDateChange}
                />

            <View style={styles.innerButtonView}>
                <Button text={'Cyk'} onPress={this.onLogoutPress}/>
                <Button text={'Habarlas'} onPress={this.onPress}/>
            </View>

           <Messenger singerName={this.props.singerName}></Messenger> // BREAKS SEARCH COMPONENT PURPOSE - INCLUDES MESSENGER FEATURES IN TO SEARCH COMPONENT

        </View>
    );
},
})


var Messenger = React.createClass({
    getInitialState: function () {
        return {
            greeting: 'Salam',
            date: new Date(),
            errorMessage: '',
            user: null,
            olderMessageTextFrom: [],
            olderMessageTextTo: [],
            olderMessageDateFrom: [],
            olderMessageDateTo: [],
            earlierMessages: []
        }
    },
    componentWillMount: function () {
        Parse.User.currentAsync().then((user) => {
                this.setState({user: user})
            }
        )
    },
    getMessages() {
        return [
            {
                text: this.state.greeting,
                name: this.props.singerName,
                image: require('../common/images/1.png'),
                position: 'left',
                date: new Date()
            },

“严格使用”；
var Search=React.cerateClasss({
getDefaultProps:函数（）{
返回{
日期：新日期（），
singerName:'
};
},
getInitialState:函数（）{
返回{
日期：this.props.date，
艺人姓名：''，
艺术家：1，
maxNoArtist:0，
imagePath:“../common/images/1.png”，
用户：空
}
},
getArtistName:函数（）{
var-artist=[]；
var query=newparse.query（Parse.User）；
query.equalTo（'userId'，this.state.artistUserId）；
返回query.first({
成功：（结果）=>{
this.setState（{artistName:result.get（'name'）}）；
this.props.singerName=result.get（'name'）；
this.setState（{imagePath:result.get（'image'）.url（）}）；
},
错误：（数据，错误）=>{
console.log（'发生错误：'+错误.message（））
}
});
},
渲染：函数（）{
如果（！this.state.user）{
返回
加载。。。。
}
var username=this.state.user.get（'username'）；
返回(
{this.state.artistName}
//中断搜索组件用途-在搜索组件中包含MESSENGER功能
);
},
})
var Messenger=React.createClass({
getInitialState:函数（）{
返回{
问候语：“萨拉姆”，
日期：新日期（），
错误消息：“”，
用户：null，
OlderMessageExtFrom:[]，
OlderMessageExtTo:[]，
olderMessageDateFrom:[]，
olderMessageDateTo:[]，
早期消息：[]
}
},
componentWillMount:函数（）{
Parse.User.currentAsync（）。然后（（用户）=>{
this.setState（{user:user}）
}
)
},
getMessages（）{
返回[
{
文本：this.state.greeting，
名称：this.props.singerName，
image:require（'../common/images/1.png'），
位置：'左'，
日期：新日期（）
},

好的，根据您的信息，我认为问题在于您没有在Messenger组件中获得singerName

首先，我将您的

getArtistName

方法更改为：

getArtistName: function () {
    var artist = [];
    var query = new Parse.Query(Parse.User);
    query.equalTo('userId', this.state.artistUserId);
    return query.first({
        success: (result) => {
            this.setState({artistName: result.get('name')});
            // Removed the this.props.singerName = ... 
            this.setState({imagePath: result.get('image').url()});
        },
        error: (data, error) => {
            console.log('Error occured : ' + error.message())
        }
    });
}

然后在渲染方法中：

<Messenger singerName={this.state.artistName} />

在组件内部，您需要使用setState，而不是更改道具： 也就是说

this.props.singerName='singer'

是一种错误的做事方式，您应该执行

this.setState（{singerName:'singer'}）；

然后使用

this.state.singerName

---

在messenger组件中，您可以使用

this.props.singerName访问它

我回答晚了，但我使用

props以不同的方式回答了

我有两个组件

Splash.js
Home.js
我正在从
Splash.js
向
Home.js
传递数据（让我们使用String）

第一个组件（发送器）
第二组件（接收器）

希望这能对您有所帮助。
我不太理解您的问题。您想将数据从Messenger组件传递到搜索组件？抛出的错误是什么？实际上是另一种方式。我想将数据从搜索传递到Messenger。我不获取错误或值。在您的示例中，您没有正确获取singerName？H您是否尝试过在搜索组件的
render
方法中执行
console.log（this.props.singerName）
，以查看它是否为空？是的，您是对的，我没有得到singerName。是的，我尝试过console.log（this.props.singerName）我没有得到任何价值。非常感谢建设性的反馈。我已经尝试了上述解决方案，但我有两个问题。1.当我添加时，Messenger组件中的所有功能都会出现在搜索页面上。2.我仍然没有在Messenger组件中获得singerName。更新了以前的评论，提到了两个问题。这是我的应用程序的回复：我编辑了我的答案。运行正常，我在Messenger组件中获得了艺术家的
this.props.singerName
。如果添加组件Messenger，所有功能都会正常显示。可能添加一个道具：
，并在Messenger组件中检查
this.props.displayFeatures
是否为真以显示某些功能。当您说：您应该执行此操作。setState（{singerName:'singer'}）；然后使用messenger组件中的this.state.singerName访问它，您可以使用this.props.singerName访问它。我以为在更改状态而不是道具时会使用setState，但如果我这样做。setState（{singerName:'singer'}）；那么它是在更改singerName道具，还是说artistName状态？我一直得到：2016-02-24 13:19:41.212[trace][tid:com.facebook.React.JavaScript]艺术家名称：未定义
this.props.navigation.navigate('Home', {user_name: userName})

this.props.navigation.state.params.user_name