为什么这两种代码在react-native中出现不同的行为?
问题描述:
我写这两种代码,第一个出现正确的渲染,但第二个出现不正确的空内容渲染,不知为什么?有没有人可以解释这种行为?为什么这两种代码在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 };
答
在你定义content
作为函数的第二种情况。你应该把它叫做:
return <Text style={style.header}>{content()}</Text>;
我还在学习在我的身边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