一次react中包含子组件难以理解的解构赋值

2019-11-20  本文已影响0人  提米锅锅

不久前看到一个函数子组件的例子,十分费解,组件标签的函数怎么和构建函数的参数关联起来的:
代码1

const FC = ({children})=>children()
return  <FC>{(name)=><div>hello</div>}</FC> 

代码意图是FC是父组件,它会包装子组件,子组件是一个函数用于输出结果。

改成下面这样写就容易理解了
代码2

const FC = (props)=>{
   let {children} = props;
    return children()
}

说明:

1.每个fc都有props的参数,props有名字为children的属性表示子组件。
2.{(name)=><div>hello</div>}这个函数就是children。
3.代码块内用解构赋值得到了children,并且执行。

children是react内置的名字,所以如下用children2会报错,这样说明了代码1的写法children其实不是一个可以改变名字的变量,而是props的中的属性,所以凡是用这种方式来包含子组件,必然都会写成

FunctionName =({children})=

下面这样会报错

const FC = ({children2})=>children2()
return  <FC>{(name)=><div>hello</div>}</FC> 

这个例子告诉我,以后看到{abc}和abc真的不一样,解构赋值要牢记!!!

上一篇下一篇

猜你喜欢

热点阅读