请教context函数组件里箭头函数这里的用法
来源：7-19 是否用过React Context
慕无忌0473372
2021-02-27
请教双越老师
function ThemeLink (props) {
// const theme = this.context // 会报错。函数式组件没有实例，即没有 this
// 函数式组件可以使用 Consumer
return <ThemeContext.Consumer>
{ value => <p>link's theme is {value}</p> }
</ThemeContext.Consumer>
}
这里这个
{ value => <p>link's theme is {value}</p> }
我没弄明白，感觉结果上看这里是执行了函数是返回了这个p节点吧？但感觉箭头函数比如
var fn = x => x * x;
这个fn还是一个函数吧？因为x => x * x这部分是个函数，把这个函数赋值给fn 那么
value => <p>link's theme is {value}</p>
这一部分感觉其实也是一个函数并没有执行？
所以这个花括号里感觉就像是{fn}而不是{fn()}的感觉？可那又怎么会返回这个p节点呢？
谢谢老师！
写回答
1回答
-
你也说了，这里是一个 {fn} 而不是 {fn()} ，即这里只定义函数而不执行。
什么时候执行，什么时候返回 p 节点。组件渲染的时候，就执行这个函数。
PS：其实，不光这里，整个 JSX 编译了之后，也就是一个函数。组件渲染时，执行函数。
132021-03-01
相似问题