React原生屬性

我真的想把自己的腦袋繞過屬性，以及它們是如何通過反應的。但我不能。無論我嘗試什麼，我都無法訪問任何我傳入組件的內容。React原生屬性

我有一個主頁，它包含一個MyProfile組件，即Im將JSON對象傳遞給用戶屬性。

var myUser = {"name":"test","avatar":"imagelinketc"} 

<MyProfile user={myUser} />

然後在MyProfile組件中，Im根據傳遞的屬性設置用戶。但它不工作！？

class MyProfile extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     user: props.user, 
     loaded:false 
    }; 
    } 

    render(){ 
    return(
     <View> 
     <Text>{this.state.user.name}</Text> 
     </View> 
    ) 
    } 
}

這將返回null/undefined。

然後我嘗試這個...

class MyProfile extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     user: null, 
     loaded:false 
    }; 
    } 

    onComponentWillMount(){ 
    this.setState({ 
     user:this.props.user,  
     loaded:true 
    }); 
    } 

    render(){ 
    return(
     <View> 
     <Text>{this.state.user.name}</Text> 
     </View> 
    ) 
    } 
}

仍不明確。我也試過了，直接設置this.user屬性。在this.state之外，仍然未定義。看來我無法將屬性傳遞給MyProfile。無論我傳遞什麼，結果都是空的。我是否完全倒退？

如何將用戶從第一頁傳遞到配置文件頁面？一直堅持了幾個小時。 PS：我實際上已經能夠在我的應用程序中的其他地方傳遞屬性就好了。並使用它們傳遞給組件。它只是這一種成分，讓我悲痛

來源

2016-02-19 KyleK

您不應該手動設置狀態。 – christopher

詳細說明。我一直在做這個遍佈我的應用程序，它迄今爲止工作。我應該如何設置狀態？（不使用flux，redux動作等）該應用程序很簡單，直到我將所有數據加載到頂部，並將其傳遞到需要它的頁面。到目前爲止，它一直在努力。很明顯，儘管我完全錯了。仍然在考慮常規應用程序，而不是反應流量。 PS所有的例子似乎確切地說明了我在這裏完成的工作，所以我不確定你說的意思是什麼時候不要手動設置 – KyleK

你可以傳遞View和Text組件嗎？ – necromos

有你需要做的幾件事情：

變化onComponentWillMount到componentWillMount
當傳承的屬性和它們設置在構造函數，你需要引用它們this.props而不是道具

看看下面的代碼，看看我在說什麼：

var user = { name: 'Chris', age: 22, location: 'California' } 

class App extends Component { 

    constructor(props){ 
    super(props) 
    this.state = { 
     user: user 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <User user={ this.state.user } /> 
     </View> 
    ); 
    } 
} 

class User extends Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     user: this.props.user 
    } 
    } 

    render() { 
    return <View> 
       <Text>{ this.props.user.name }</Text> 
       <Text>{ this.props.user.age }</Text> 
       <Text>{ this.props.user.location }</Text> 
      </View> 
    } 
}

來源

2016-02-19 12:24:05

謝謝！解決了！ – KyleK

回答

相關問題