React组件,props属性里的children,是如何传递使用的?
发布于 作者:苏南大叔 来源:程序如此灵动~ 我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...
在React
函数组件里面,可以直接传递children
属性,也可以隐式的传递children
属性。这可是其它属性所不具备的能力效果。而且两种传递方式同时存在的时候,还有个优先级的关系。本文就对组件属性children
做个简单的探讨。
苏南大叔的“程序如此灵动”博客,记录苏南大叔的代码编程经验总结。本文测试环境:nodejs@20.18.0
,create-react-app@5.0.1
,react-router-dom@6.27.0
,react@18.3.1
。本文演示的组件类型为React
函数式组件。
前文回顾
本文就写的比较简单明了,以前的这篇文章,写的更加详细一些。
龙套子组件
children
是一个特殊的属性,它代表了组件标签内部的所有子节点。当一个组件在使用时包裹了其他的内容,这些被包裹的内容就会作为children
传递给该组件。
const Sn = ({ children }) => {
return <div>{children}</div>;
};
第一种传递方式
<Sn>标准写法</Sn>
第二种传递方式
<Sn children={"直接写属性"}></Sn>
同时使用两种方式
<Sn children={"直接写属性"}>这里会进行覆盖</Sn>
然而,两者不能同时生效。被组件包裹的children
有更高的优先级。
完整代码
import React from "react";
const Sn = ({ children }) => {
return <div>{children}</div>;
};
export default () => {
return (
<>
<Sn>标准写法</Sn>
<Sn children={"直接写属性"}></Sn>
<Sn children={"直接写属性"}>这里会进行覆盖</Sn>
</>
);
};
输出:
标准写法
直接写属性
这里会进行覆盖
补充一下
这个children
属性,不光可以传递普通的字符串,更多的是传递组件组合。比如:
import React from "react";
const Sn = ({ children }) => {
return <div>{children}</div>;
};
export default () => {
return (
<>
<Sn><L1><L2/></L1></Sn>
<Sn children={<L1><L2/></L1>}></Sn>
<Sn children={<<L2/>}><L1><L2/></L1></Sn>
</>
);
};
相关文章
如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。