2017-05-04 24 views
1

我寫這兩種代碼,第一個出現正確的渲染,但第二個出現不正確的空內容渲染,不知爲什麼?有沒有人可以解釋這種行爲?爲什麼這兩種代碼在react-native中出現不同的行爲?

首先

import React from 'react' 
import { Text } from 'react-native' 

const Header =() => { 
    return <Text style={style.header}>{content}</Text>; 
} 

const style = { 
header: { 
    fontSize: 20 
} 
} 

const content = "content" 

export { Header }; 

import React from 'react' 
import { Text } from 'react-native' 

const Header =() => { 
    return <Text style={style.header}>{content}</Text>; 
} 

const style = { 
header: { 
    fontSize: 20 
} 
} 

const content =() => { 
    return "content" 
} 

export { Header }; 
+0

我還在學習在我的身邊JS/RN有時像這樣:)第二個樣本的問題,看來你使用發箭函數語法所以這是假設的約束功能到當前語境中的詞彙「這個」。 因爲你沒有聲明一個類,我很想知道它在做什麼[https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1 html的#自動綁定](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding) – Seb

回答

2

在你定義content作爲函數的第二種情況。你應該把它叫做:

return <Text style={style.header}>{content()}</Text>; 
相關問題