多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
[toc] # react元素和react组件关于作为children方面的那些问题 ## pre 首先要明确的: 任何字符和react元素(type为string和type为fn)都能作为children 下面这些方式都能为一个组件添加children ![](https://box.kancloud.cn/04013ef52114e439d4546b1b7295449d_624x423.png) ## react元素和react组件分别能f以哪些形式作为children ### react元素只能以`{}`的形式而不能用`<>`的形式 另外下面这种等同于type为string类型,即原生html ``` let el = <div>el</div> ``` 这个变量名字`el`不用大写,可以直接用`{}`作为children ``` render(){ return ( <div> {el} </div> ) } ``` 这样写是不会报错的,因为`<div>el</div>`就等于`React.createElement('div')` 但如果 ![](https://box.kancloud.cn/a188b0b5e3b4192db0c243f3655c326c_271x135.png) 是会报错的,因为此时`El`尽管首字母大写了,它也不是一个组件,它依然是一个普通的react元素(不是一个函数或则说类),type为string(不为func),是不能使用`<>`的形式的 ![](https://box.kancloud.cn/3c25516f59ce41658af79a76f1455dbe_842x122.png) 但依然可以这么使用 ``` render(){ return ( <div> {El} </div> ) } ``` ### react组件不能用`{}`的形式,必须用`<>`的形式 正如上面标题所言,但有一个前提是react组件的函数名(变量名)必须首字母大写,不然即使使用`<>`的形式也不会当做一个react组件渲染(而只会被当做一个自定义标签) 如果使用`{}`(并且`{}`里就是一个组件函数名或类名,未调用React.CreateElement(`<>`)),此时这个react组件还只是一个函数,还没有调用`React.createElement(组件名)`来创建组件, 会报以下错误 ![](https://box.kancloud.cn/94c0a52daa9fe4bbaac6141796b75c97_951x198.png) 但如果`{}`里的已经是一个`<>`(即调用了React.createElement),那么也是可以的。 ### react元素里能嵌套react组件(反之,当然亦然) #### 不是说react元素就不能有孩子 ![](https://box.kancloud.cn/86f84fc26baa027bc8e7a37c7c0f8ec2_465x265.png) So,不是说react元素就不能有孩子,这个孩子还可以是react组件 ![](https://box.kancloud.cn/8e942a38f0db89be1ac13a6ba5d49307_431x404.png)