为了账号安全,请及时绑定邮箱和手机立即绑定

react的静态组件

2020.01.10 14:16 5796浏览

react的项目开发中有使用一些UI框架框架中有一些组件是这样写的:这是react-bootstrap轮播图组件。

<Carousel activeIndex={index} onSelect={handleSelect}>
      {
        props.swiperImg ? props.swiperImg.map((item, index) => {
          return (
            <Carousel.Item key={index}>
              <img alt={item.slide_des} src={'https://www.onecc.net/data/upload/' + item.slide_pic} />
            </Carousel.Item>
          )
        }) : ('')
      }
    </Carousel>


组件名有Carousel.Item这样的写法,于是就深入学习了一下。
找到UI框架的组件文件Item是组件的一个静态方法

http://img1.mukewang.com/5e18161f0001d36907990832.jpg


继续往下找:可以发先Item是一个顶层为div的dom元素
http://img1.mukewang.com/5e18161f000165e408210247.jpg

关键就是组件下的一个tag为div的静态方法(就叫你静态组件好了)
自己实现一个简单的静态组件
父组件

<HookApi Cref={childRef}>
        <HookApi.Con>423423421111111111111111113</HookApi.Con>
        <HookApi.Con>23423423423424234</HookApi.Con>
      </HookApi>


子组件:这里我吧静态组件的名字为Con然后tag为div(尽量选用html标签名如:HookApi.Con = 'div'渲染到浏览器上为div)

import React from 'react';

function HookApi(props) {
  console.log(props)
  return (
    <div>
      {
        props.children.map((item,index) => {
          return (
            <div key={index}>
              {item}
            </div>
          )
        })
      }
    </div>
  );
}

HookApi.Con = 'div'

export default HookApi


这个Con就相当于是一个react组件了

http://img3.mukewang.com/5e18161f00013bcd06830247.jpg


渲染到浏览器中是这样的

http://img1.mukewang.com/5e18161f000178a804030062.jpg


如果 HookApi.Con = 'div'则渲染出来的是这样的并会爆出组件渲染错误:
<Con /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

http://img2.mukewang.com/5e1816200001427203180057.jpg




点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消