一次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真的不一样,解构赋值要牢记!!!