React-Hook 轮子公开课（从零开始）用最基础的方式写出一个简单的组件库——第三课【Row、Col】布局组件

最新推荐文章于 2024-08-07 11:21:21 发布
最新推荐文章于 2024-08-07 11:21:21 发布
阅读量1.4k 收藏 3
点赞数 4
分类专栏： react 组件库 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/clli_chain/article/details/125681419
版权

文章目录

一、组件库介绍

有兴趣的同学 可以先着手看源码，之前写的一系列开源组件库项目（有帮助的同学也帮忙点个star👍）

名称官网github
tinkerbell-ui(vue2.0)http://tinkerbell.tophttps://github.com/hanbingxu82/tinkerbell-ui
tinkerbell-ui(vue3.0)—https://github.com/hanbingxu82/tinkerbell-ui-next
tinkerbell-ui(react-hook)—https://github.com/hanbingxu82/tinkerbell-ui-react

二、Row、Col组件流程介绍

想到布局组件，其实我们最先想到的也就是栅栏，最早接触前端的时候、或者最早接触ui组件的时候，我们首先是不是就先想起来了 Bootstrap 里面的栅栏呢？其实功能类似，底层的话采用的是什么功能呢？也就是@media媒体查询，利用的其实也就是浏览器的分辨率监听，实现了对应的class样式变更，从而达到了一个分割布局的这么一个效果，主要也是捋清我们怎样去写这个代码：

1、我们肯定是要把Row、Col当成两个正常普通的组件，可以在上面设置通用的事件，设置style、class、id属性等

2、那么话说回来 Row 是行、 Col 是列，如何对这两个组件进行组件传值，肯定是父组件 Row 包裹子组件 Col ，那如何使用 Row 的属性实现对 Col，组件的控制也同样是一个问题？

3、我们应该传递什么属性给 Row 组件，传递什么属性给 Col 组件？

Row：
justify: string // 水平排列方式
align: string // 垂直排列方式
gutter: number // 栅格间隔

Col：
span: number | string // 栅格占据的列数
push: number | string // 栅格向右移动格数
offset: number | string // 栅格左侧的间隔格数
pull: number | string // 栅格向左移动格数
xs: number | object // <768px 响应式栅格数或者栅格属性对象
sm: number | object // ≥768px 响应式栅格数或者栅格属性对象
md: number | object // ≥992 响应式栅格数或者栅格属性对象
lg: number | object // ≥1200 响应式栅格数或者栅格属性对象
xl: number | object // ≥1920px 响应式栅格数或者栅格属性对象

三、代码详解

3.1、Row.tsx


import React, { useEffect, useState,  } from 'react'
import './index.scss'
interface Iprops {
  justify: string // 水平排列方式
  align: string // 垂直排列方式
  gutter: number // 栅格间隔
}
// export const Context = createContext<any>(null)
function Row(props: any) {
  const [tbalign, setTbalign] = useState({})
  const [tbjustify, setTbjustify] = useState({})
  const { justify, align }: Iprops = props

  useEffect(() => {
    pjustify()
    palign()
  }, [])
  // 判断
  function pjustify() {
    if (justify == 'start') {
      setTbjustify({
        justifyContent: 'flex-start'
      })
    } else if (justify == 'center') {
      setTbjustify({
        justifyContent: 'center'
      })
    } else if (justify == 'end') {
      setTbjustify({
        justifyContent: 'flex-end'
      })
    } else if (justify == 'space-around') {
      setTbjustify({
        justifyContent: 'space-around'
      })
    } else if (justify == 'space-between') {
      setTbjustify({
        justifyContent: 'space-between'
      })
    } else {
      setTbjustify({})
    }
  }
  // 判断布局
  function palign() {
    if (align == 'top') {
      setTbalign({
        alignItems: 'flex-start'
      })
    } else if (align == 'middle') {
      setTbalign({
        alignItems: 'crenter'
      })
    } else if (align == 'bottom') {
      setTbalign({
        alignItems: 'flex-end'
      })
    } else {
      setTbalign({})
    }
  }
  return (
    <div className='tb-row' style={{ ...tbalign, ...tbjustify }}>
      {/* <Context.Provider value={{ ...{ ...props } }}> */}
        {React.Children.map(props.children, (item) => {
          return React.cloneElement(item, {
            item,
            parent: {
              props
            }
          })
        })}
      {/* </Context.Provider> */}
    </div>
  )
}
export default Row

3.2、Row / index.scss

.tb-row {
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
}

3.3、Col.tsx


import React, { useState, useEffect } from 'react'
// import { Context } from '../Row/index'
import './index.scss'
interface Iprops {
  span: number | string // 栅格占据的列数
  push: number | string // 栅格向右移动格数
  offset: number | string // 栅格左侧的间隔格数
  pull: number | string // 栅格向左移动格数
  xs: number | object // <768px 响应式栅格数或者栅格属性对象
  sm: number | object // ≥768px 响应式栅格数或者栅格属性对象
  md: number | object // ≥992 响应式栅格数或者栅格属性对象
  lg: number | object // ≥1200 响应式栅格数或者栅格属性对象
  xl: number | object // ≥1920px 响应式栅格数或者栅格属性对象 
}

function Col(props: any) {
  // const RowComponent = useContext(Context)
  // // 删除两个多余的传递属性 放置多个传递替换本身的 props 属性
  // if (RowComponent) {
  //   delete RowComponent.children
  //   delete RowComponent.item
  // }

  // 全部设置默认初始值
  const {
    span = 0,
    offset = 0,
    push = 0,
    pull,
    xs = 0,
    sm = 0,
    md = 0,
    lg = 0,
    xl = 0
  }: Iprops = props
  //   const [gutter, setGutter] = useState('')
  const [num, setNum] = useState(0)
  //   const [color, setColor] = useState('red')
  const [tbxs, setTbxs] = useState('')
  const [tbsm, setTbsm] = useState('')
  const [tbmd, setTbmd] = useState('')
  const [tblg, setTblg] = useState('')
  const [tbxl, setTbxl] = useState('')

  // 初始化
  useEffect(() => {
    setNum(4.1666)
    Pxs()
    Psm()
    Pmd()
    Plg()
    Pxl()
  }, []) // eslint-disable-line
  function Pxs() {
    // 如果是数值类型
    if (
      xs > 0 &&
      (/ Number/.test(Object.prototype.toString.call(xs)) ||
        / String/.test(Object.prototype.toString.call(xs)))
    ) {
      setTbxs('tb-col-xs-' + xs)
    } else if (xs && / Object/.test(Object.prototype.toString.call(xs))) {
      setTbxs(
        'tb-col-xs-' +
          (xs as { span: '' }).span +
          ' tb-col-xs-offset-' +
          (xs as { span: '' }).span
      )
    } else {
      setTbxs('')
    }
  }
  function Psm() {
    // 如果是数值类型
    if (
      sm > 0 &&
      (/ Number/.test(Object.prototype.toString.call(sm)) ||
        / String/.test(Object.prototype.toString.call(sm)))
    ) {
      setTbsm('tb-col-sm-' + sm)
    } else if (sm && / Object/.test(Object.prototype.toString.call(sm))) {
      setTbsm(
        'tb-col-sm-' +
          (sm as { span: '' }).span +
          ' tb-col-sm-offset-' +
          (sm as { span: '' }).span
      )
    } else {
      setTbsm('')
    }
  }
  function Pmd() {
    // 如果是数值类型
    if (
      md > 0 &&
      (/ Number/.test(Object.prototype.toString.call(md)) ||
        / String/.test(Object.prototype.toString.call(md)))
    ) {
      setTbmd('tb-col-md-' + md)
    } else if (md && / Object/.test(Object.prototype.toString.call(md))) {
      setTbmd(
        'tb-col-md-' +
          (md as { span: '' }).span +
          ' tb-col-md-offset-' +
          (md as { span: '' }).span
      )
    } else {
      setTbmd('')
    }
  }
  function Plg() {
    // 如果是数值类型
    if (
      lg > 0 &&
      (/ Number/.test(Object.prototype.toString.call(lg)) ||
        / String/.test(Object.prototype.toString.call(lg)))
    ) {
      setTblg('tb-col-lg-' + lg)
    } else if (lg && / Object/.test(Object.prototype.toString.call(lg))) {
      setTblg(
        'tb-col-lg-' +
          (lg as { span: '' }).span +
          ' tb-col-lg-offset-' +
          (lg as { span: '' }).span
      )
    } else {
      setTblg('')
    }
  }
  function Pxl() {
    // 如果是数值类型
    if (
      xl > 0 &&
      (/ Number/.test(Object.prototype.toString.call(xl)) ||
        / String/.test(Object.prototype.toString.call(xl)))
    ) {
      setTbxl('tb-col-xl-' + xl)
    } else if (xl && / Object/.test(Object.prototype.toString.call(xl))) {
      setTbxl(
        'tb-col-xl-' +
          (xl as { span: '' }).span +
          ' tb-col-xl-offset-' +
          (xl as { span: '' }).span
      )
    } else {
      setTbxl('')
    }
  }
  // const childrenItem = React.Children.map(props.children, (item) => {
  //   return React.cloneElement(item, {
  //     // ...RowComponent,
  //     item,
  //     instanceType:'Col',
  //     parent: {
  //       props
  //     }
  //   })
  // })

  return (
    <div
      className={`tb-col ${tbxs} ${tbsm} ${tbmd} ${tblg} ${tbxl} `}
      style={{
        width: `${num * Number(span)}%`,
        padding: `0 ${props.parent.props.gutter / 2}px`,
        marginLeft: `${num * Number(offset || pull) + '%'}`,
        marginRight: `${num * Number(push) + '%'}`
      }}
    >
      {/* {childrenItem ? childrenItem : props.children} */}
      {props.children}
    </div>
  )
}
export default Col

3.4、Col / index.scss

.tb-col {
  max-width: 100%;
  min-height: 36px;
  /* background: brown; */
  /* padding: 30px; */
  box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
  .tb-col-xs-offset-1 {
    margin-left: calc(4.1666% * 1) !important;
  }

  .tb-col-xs-offset-2 {
    margin-left: calc(4.1666% * 2) !important;
  }

  .tb-col-xs-offset-3 {
    margin-left: calc(4.1666% * 3) !important;
  }

  .tb-col-xs-offset-4 {
    margin-left: calc(4.1666% * 4) !important;
  }

  .tb-col-xs-offset-5 {
    margin-left: calc(4.1666% * 5) !important;
  }

  .tb-col-xs-offset-6 {
    margin-left: calc(4.1666% * 6) !important;
  }

  .tb-col-xs-offset-7 {
    margin-left: calc(4.1666% * 7) !important;
  }

  .tb-col-xs-offset-8 {
    margin-left: calc(4.1666% * 8) !important;
  }

  .tb-col-xs-offset-9 {
    margin-left: calc(4.1666% * 9) !important;
  }

  .tb-col-xs-offset-10 {
    margin-left: calc(4.1666% * 10) !important;
  }

  .tb-col-xs-offset-11 {
    margin-left: calc(4.1666% * 11) !important;
  }

  .tb-col-xs-offset-12 {
    margin-left: calc(4.1666% * 12) !important;
  }

  .tb-col-xs-offset-13 {
    margin-left: calc(4.1666% * 13) !important;
  }

  .tb-col-xs-offset-14 {
    margin-left: calc(4.1666% * 14) !important;
  }

  .tb-col-xs-offset-15 {
    margin-left: calc(4.1666% * 15) !important;
  }

  .tb-col-xs-offset-16 {
    margin-left: calc(4.1666% * 16) !important;
  }

  .tb-col-xs-offset-17 {
    margin-left: calc(4.1666% * 17) !important;
  }

  .tb-col-xs-offset-18 {
    margin-left: calc(4.1666% * 18) !important;
  }

  .tb-col-xs-offset-19 {
    margin-left: calc(4.1666% * 19) !important;
  }

  .tb-col-xs-offset-20 {
    margin-left: calc(4.1666% * 20) !important;
  }

  .tb-col-xs-offset-21 {
    margin-left: calc(4.1666% * 21) !important;
  }

  .tb-col-xs-offset-22 {
    margin-left: calc(4.1666% * 22) !important;
  }

  .tb-col-xs-offset-23 {
    margin-left: calc(4.1666% * 23) !important;
  }

  .tb-col-xs-offset-24 {
    margin-left: calc(4.1666% * 24) !important;
  }

  .tb-col-xs-1 {
    width: calc(4.1666% * 1) !important;
  }

  .tb-col-xs-2 {
    width: calc(4.1666% * 2) !important;
  }

  .tb-col-xs-3 {
    width: calc(4.1666% * 3) !important;
  }

  .tb-col-xs-4 {
    width: calc(4.1666% * 4) !important;
  }

  .tb-col-xs-5 {
    width: calc(4.1666% * 5) !important;
  }

  .tb-col-xs-6 {
    width: calc(4.1666% * 6) !important;
  }

  .tb-col-xs-7 {
    width: calc(4.1666% * 7) !important;
  }

  .tb-col-xs-8 {
    width: calc(4.1666% * 8) !important;
  }

  .tb-col-xs-9 {
    width: calc(4.1666% * 9) !important;
  }

  .tb-col-xs-10 {
    width: calc(4.1666% * 10) !important;
  }

  .tb-col-xs-11 {
    width: calc(4.1666% * 11) !important;
  }

  .tb-col-xs-12 {
    width: calc(4.1666% * 12) !important;
  }

  .tb-col-xs-13 {
    width: calc(4.1666% * 13) !important;
  }

  .tb-col-xs-14 {
    width: calc(4.1666% * 14) !important;
  }

  .tb-col-xs-15 {
    width: calc(4.1666% * 15) !important;
  }

  .tb-col-xs-16 {
    width: calc(4.1666% * 16) !important;
  }

  .tb-col-xs-17 {
    width: calc(4.1666% * 17) !important;
  }

  .tb-col-xs-18 {
    width: calc(4.1666% * 18) !important;
  }

  .tb-col-xs-19 {
    width: calc(4.1666% * 19) !important;
  }

  .tb-col-xs-20 {
    width: calc(4.1666% * 20) !important;
  }

  .tb-col-xs-21 {
    width: calc(4.1666% * 21) !important;
  }

  .tb-col-xs-22 {
    width: calc(4.1666% * 22) !important;
  }

  .tb-col-xs-23 {
    width: calc(4.1666% * 23) !important;
  }

  .tb-col-xs-24 {
    width: calc(4.1666% * 24) !important;
  }
}

@media only screen and (min-width: 768px) {

  .tb-col-sm-offset-1 {
    margin-left: calc(4.1666% * 1) !important;
  }

  .tb-col-sm-offset-2 {
    margin-left: calc(4.1666% * 2) !important;
  }

  .tb-col-sm-offset-3 {
    margin-left: calc(4.1666% * 3) !important;
  }

  .tb-col-sm-offset-4 {
    margin-left: calc(4.1666% * 4) !important;
  }

  .tb-col-sm-offset-5 {
    margin-left: calc(4.1666% * 5) !important;
  }

  .tb-col-sm-offset-6 {
    margin-left: calc(4.1666% * 6) !important;
  }

  .tb-col-sm-offset-7 {
    margin-left: calc(4.1666% * 7) !important;
  }

  .tb-col-sm-offset-8 {
    margin-left: calc(4.1666% * 8) !important;
  }

  .tb-col-sm-offset-9 {
    margin-left: calc(4.1666% * 9) !important;
  }

  .tb-col-sm-offset-10 {
    margin-left: calc(4.1666% * 10) !important;
  }

  .tb-col-sm-offset-11 {
    margin-left: calc(4.1666% * 11) !important;
  }

  .tb-col-sm-offset-12 {
    margin-left: calc(4.1666% * 12) !important;
  }

  .tb-col-sm-offset-13 {
    margin-left: calc(4.1666% * 13) !important;
  }

  .tb-col-sm-offset-14 {
    margin-left: calc(4.1666% * 14) !important;
  }

  .tb-col-sm-offset-15 {
    margin-left: calc(4.1666% * 15) !important;
  }

  .tb-col-sm-offset-16 {
    margin-left: calc(4.1666% * 16) !important;
  }

  .tb-col-sm-offset-17 {
    margin-left: calc(4.1666% * 17) !important;
  }

  .tb-col-sm-offset-18 {
    margin-left: calc(4.1666% * 18) !important;
  }

  .tb-col-sm-offset-19 {
    margin-left: calc(4.1666% * 19) !important;
  }

  .tb-col-sm-offset-20 {
    margin-left: calc(4.1666% * 20) !important;
  }

  .tb-col-sm-offset-21 {
    margin-left: calc(4.1666% * 21) !important;
  }

  .tb-col-sm-offset-22 {
    margin-left: calc(4.1666% * 22) !important;
  }

  .tb-col-sm-offset-23 {
    margin-left: calc(4.1666% * 23) !important;
  }

  .tb-col-sm-offset-24 {
    margin-left: calc(4.1666% * 24) !important;
  }

  .tb-col-sm-1 {
    width: calc(4.1666% * 1) !important;
  }

  .tb-col-sm-2 {
    width: calc(4.1666% * 2) !important;
  }

  .tb-col-sm-3 {
    width: calc(4.1666% * 3) !important;
  }

  .tb-col-sm-4 {
    width: calc(4.1666% * 4) !important;
  }

  .tb-col-sm-5 {
    width: calc(4.1666% * 5) !important;
  }

  .tb-col-sm-6 {
    width: calc(4.1666% * 6) !important;
  }

  .tb-col-sm-7 {
    width: calc(4.1666% * 7) !important;
  }

  .tb-col-sm-8 {
    width: calc(4.1666% * 8) !important;
  }

  .tb-col-sm-9 {
    width: calc(4.1666% * 9) !important;
  }

  .tb-col-sm-10 {
    width: calc(4.1666% * 10) !important;
  }

  .tb-col-sm-11 {
    width: calc(4.1666% * 11) !important;
  }

  .tb-col-sm-12 {
    width: calc(4.1666% * 12) !important;
  }

  .tb-col-sm-13 {
    width: calc(4.1666% * 13) !important;
  }

  .tb-col-sm-14 {
    width: calc(4.1666% * 14) !important;
  }

  .tb-col-sm-15 {
    width: calc(4.1666% * 15) !important;
  }

  .tb-col-sm-16 {
    width: calc(4.1666% * 16) !important;
  }

  .tb-col-sm-17 {
    width: calc(4.1666% * 17) !important;
  }

  .tb-col-sm-18 {
    width: calc(4.1666% * 18) !important;
  }

  .tb-col-sm-19 {
    width: calc(4.1666% * 19) !important;
  }

  .tb-col-sm-20 {
    width: calc(4.1666% * 20) !important;
  }

  .tb-col-sm-21 {
    width: calc(4.1666% * 21) !important;
  }

  .tb-col-sm-22 {
    width: calc(4.1666% * 22) !important;
  }

  .tb-col-sm-23 {
    width: calc(4.1666% * 23) !important;
  }

  .tb-col-sm-24 {
    width: calc(4.1666% * 24) !important;
  }
}

@media only screen and (min-width: 992px) {
  .tb-col-md-offset-1 {
    margin-left: calc(4.1666% * 1) !important;
  }

  .tb-col-md-offset-2 {
    margin-left: calc(4.1666% * 2) !important;
  }

  .tb-col-md-offset-3 {
    margin-left: calc(4.1666% * 3) !important;
  }

  .tb-col-md-offset-4 {
    margin-left: calc(4.1666% * 4) !important;
  }

  .tb-col-md-offset-5 {
    margin-left: calc(4.1666% * 5) !important;
  }

  .tb-col-md-offset-6 {
    margin-left: calc(4.1666% * 6) !important;
  }

  .tb-col-md-offset-7 {
    margin-left: calc(4.1666% * 7) !important;
  }

  .tb-col-md-offset-8 {
    margin-left: calc(4.1666% * 8) !important;
  }

  .tb-col-md-offset-9 {
    margin-left: calc(4.1666% * 9) !important;
  }

  .tb-col-md-offset-10 {
    margin-left: calc(4.1666% * 10) !important;
  }

  .tb-col-md-offset-11 {
    margin-left: calc(4.1666% * 11) !important;
  }

  .tb-col-md-offset-12 {
    margin-left: calc(4.1666% * 12) !important;
  }

  .tb-col-md-offset-13 {
    margin-left: calc(4.1666% * 13) !important;
  }

  .tb-col-md-offset-14 {
    margin-left: calc(4.1666% * 14) !important;
  }

  .tb-col-md-offset-15 {
    margin-left: calc(4.1666% * 15) !important;
  }

  .tb-col-md-offset-16 {
    margin-left: calc(4.1666% * 16) !important;
  }

  .tb-col-md-offset-17 {
    margin-left: calc(4.1666% * 17) !important;
  }

  .tb-col-md-offset-18 {
    margin-left: calc(4.1666% * 18) !important;
  }

  .tb-col-md-offset-19 {
    margin-left: calc(4.1666% * 19) !important;
  }

  .tb-col-md-offset-20 {
    margin-left: calc(4.1666% * 20) !important;
  }

  .tb-col-md-offset-21 {
    margin-left: calc(4.1666% * 21) !important;
  }

  .tb-col-md-offset-22 {
    margin-left: calc(4.1666% * 22) !important;
  }

  .tb-col-md-offset-23 {
    margin-left: calc(4.1666% * 23) !important;
  }

  .tb-col-md-offset-24 {
    margin-left: calc(4.1666% * 24) !important;
  }

  .tb-col-md-1 {
    width: calc(4.1666% * 1) !important;
  }

  .tb-col-md-2 {
    width: calc(4.1666% * 2) !important;
  }

  .tb-col-md-3 {
    width: calc(4.1666% * 3) !important;
  }

  .tb-col-md-4 {
    width: calc(4.1666% * 4) !important;
  }

  .tb-col-md-5 {
    width: calc(4.1666% * 5) !important;
  }

  .tb-col-md-6 {
    width: calc(4.1666% * 6) !important;
  }

  .tb-col-md-7 {
    width: calc(4.1666% * 7) !important;
  }

  .tb-col-md-8 {
    width: calc(4.1666% * 8) !important;
  }

  .tb-col-md-9 {
    width: calc(4.1666% * 9) !important;
  }

  .tb-col-md-10 {
    width: calc(4.1666% * 10) !important;
  }

  .tb-col-md-11 {
    width: calc(4.1666% * 11) !important;
  }

  .tb-col-md-12 {
    width: calc(4.1666% * 12) !important;
  }

  .tb-col-md-13 {
    width: calc(4.1666% * 13) !important;
  }

  .tb-col-md-14 {
    width: calc(4.1666% * 14) !important;
  }

  .tb-col-md-15 {
    width: calc(4.1666% * 15) !important;
  }

  .tb-col-md-16 {
    width: calc(4.1666% * 16) !important;
  }

  .tb-col-md-17 {
    width: calc(4.1666% * 17) !important;
  }

  .tb-col-md-18 {
    width: calc(4.1666% * 18) !important;
  }

  .tb-col-md-19 {
    width: calc(4.1666% * 19) !important;
  }

  .tb-col-md-20 {
    width: calc(4.1666% * 20) !important;
  }

  .tb-col-md-21 {
    width: calc(4.1666% * 21) !important;
  }

  .tb-col-md-22 {
    width: calc(4.1666% * 22) !important;
  }

  .tb-col-md-23 {
    width: calc(4.1666% * 23) !important;
  }

  .tb-col-md-24 {
    width: calc(4.1666% * 24) !important;
  }
}

@media only screen and (min-width: 1200px) {
  .tb-col-lg-offset-1 {
    margin-left: calc(4.1666% * 1) !important;
  }

  .tb-col-lg-offset-2 {
    margin-left: calc(4.1666% * 2) !important;
  }

  .tb-col-lg-offset-3 {
    margin-left: calc(4.1666% * 3) !important;
  }

  .tb-col-lg-offset-4 {
    margin-left: calc(4.1666% * 4) !important;
  }

  .tb-col-lg-offset-5 {
    margin-left: calc(4.1666% * 5) !important;
  }

  .tb-col-lg-offset-6 {
    margin-left: calc(4.1666% * 6) !important;
  }

  .tb-col-lg-offset-7 {
    margin-left: calc(4.1666% * 7) !important;
  }

  .tb-col-lg-offset-8 {
    margin-left: calc(4.1666% * 8) !important;
  }

  .tb-col-lg-offset-9 {
    margin-left: calc(4.1666% * 9) !important;
  }

  .tb-col-lg-offset-10 {
    margin-left: calc(4.1666% * 10) !important;
  }

  .tb-col-lg-offset-11 {
    margin-left: calc(4.1666% * 11) !important;
  }

  .tb-col-lg-offset-12 {
    margin-left: calc(4.1666% * 12) !important;
  }

  .tb-col-lg-offset-13 {
    margin-left: calc(4.1666% * 13) !important;
  }

  .tb-col-lg-offset-14 {
    margin-left: calc(4.1666% * 14) !important;
  }

  .tb-col-lg-offset-15 {
    margin-left: calc(4.1666% * 15) !important;
  }

  .tb-col-lg-offset-16 {
    margin-left: calc(4.1666% * 16) !important;
  }

  .tb-col-lg-offset-17 {
    margin-left: calc(4.1666% * 17) !important;
  }

  .tb-col-lg-offset-18 {
    margin-left: calc(4.1666% * 18) !important;
  }

  .tb-col-lg-offset-19 {
    margin-left: calc(4.1666% * 19) !important;
  }

  .tb-col-lg-offset-20 {
    margin-left: calc(4.1666% * 20) !important;
  }

  .tb-col-lg-offset-21 {
    margin-left: calc(4.1666% * 21) !important;
  }

  .tb-col-lg-offset-22 {
    margin-left: calc(4.1666% * 22) !important;
  }

  .tb-col-lg-offset-23 {
    margin-left: calc(4.1666% * 23) !important;
  }

  .tb-col-lg-offset-24 {
    margin-left: calc(4.1666% * 24) !important;
  }

  .tb-col-lg-1 {
    width: calc(4.1666% * 1) !important;
  }

  .tb-col-lg-2 {
    width: calc(4.1666% * 2) !important;
  }

  .tb-col-lg-3 {
    width: calc(4.1666% * 3) !important;
  }

  .tb-col-lg-4 {
    width: calc(4.1666% * 4) !important;
  }

  .tb-col-lg-5 {
    width: calc(4.1666% * 5) !important;
  }

  .tb-col-lg-6 {
    width: calc(4.1666% * 6) !important;
  }

  .tb-col-lg-7 {
    width: calc(4.1666% * 7) !important;
  }

  .tb-col-lg-8 {
    width: calc(4.1666% * 8) !important;
  }

  .tb-col-lg-9 {
    width: calc(4.1666% * 9) !important;
  }

  .tb-col-lg-10 {
    width: calc(4.1666% * 10) !important;
  }

  .tb-col-lg-11 {
    width: calc(4.1666% * 11) !important;
  }

  .tb-col-lg-12 {
    width: calc(4.1666% * 12) !important;
  }

  .tb-col-lg-13 {
    width: calc(4.1666% * 13) !important;
  }

  .tb-col-lg-14 {
    width: calc(4.1666% * 14) !important;
  }

  .tb-col-lg-15 {
    width: calc(4.1666% * 15) !important;
  }

  .tb-col-lg-16 {
    width: calc(4.1666% * 16) !important;
  }

  .tb-col-lg-17 {
    width: calc(4.1666% * 17) !important;
  }

  .tb-col-lg-18 {
    width: calc(4.1666% * 18) !important;
  }

  .tb-col-lg-19 {
    width: calc(4.1666% * 19) !important;
  }

  .tb-col-lg-20 {
    width: calc(4.1666% * 20) !important;
  }

  .tb-col-lg-21 {
    width: calc(4.1666% * 21) !important;
  }

  .tb-col-lg-22 {
    width: calc(4.1666% * 22) !important;
  }

  .tb-col-lg-23 {
    width: calc(4.1666% * 23) !important;
  }

  .tb-col-lg-24 {
    width: calc(4.1666% * 24) !important;
  }
}

@media only screen and (min-width: 1920px) {
  .tb-col-xl-offset-1 {
    margin-left: calc(4.1666% * 1) !important;
  }

  .tb-col-xl-offset-2 {
    margin-left: calc(4.1666% * 2) !important;
  }

  .tb-col-xl-offset-3 {
    margin-left: calc(4.1666% * 3) !important;
  }

  .tb-col-xl-offset-4 {
    margin-left: calc(4.1666% * 4) !important;
  }

  .tb-col-xl-offset-5 {
    margin-left: calc(4.1666% * 5) !important;
  }

  .tb-col-xl-offset-6 {
    margin-left: calc(4.1666% * 6) !important;
  }

  .tb-col-xl-offset-7 {
    margin-left: calc(4.1666% * 7) !important;
  }

  .tb-col-xl-offset-8 {
    margin-left: calc(4.1666% * 8) !important;
  }

  .tb-col-xl-offset-9 {
    margin-left: calc(4.1666% * 9) !important;
  }

  .tb-col-xl-offset-10 {
    margin-left: calc(4.1666% * 10) !important;
  }

  .tb-col-xl-offset-11 {
    margin-left: calc(4.1666% * 11) !important;
  }

  .tb-col-xl-offset-12 {
    margin-left: calc(4.1666% * 12) !important;
  }

  .tb-col-xl-offset-13 {
    margin-left: calc(4.1666% * 13) !important;
  }

  .tb-col-xl-offset-14 {
    margin-left: calc(4.1666% * 14) !important;
  }

  .tb-col-xl-offset-15 {
    margin-left: calc(4.1666% * 15) !important;
  }

  .tb-col-xl-offset-16 {
    margin-left: calc(4.1666% * 16) !important;
  }

  .tb-col-xl-offset-17 {
    margin-left: calc(4.1666% * 17) !important;
  }

  .tb-col-xl-offset-18 {
    margin-left: calc(4.1666% * 18) !important;
  }

  .tb-col-xl-offset-19 {
    margin-left: calc(4.1666% * 19) !important;
  }

  .tb-col-xl-offset-20 {
    margin-left: calc(4.1666% * 20) !important;
  }

  .tb-col-xl-offset-21 {
    margin-left: calc(4.1666% * 21) !important;
  }

  .tb-col-xl-offset-22 {
    margin-left: calc(4.1666% * 22) !important;
  }

  .tb-col-xl-offset-23 {
    margin-left: calc(4.1666% * 23) !important;
  }

  .tb-col-xl-offset-24 {
    margin-left: calc(4.1666% * 24) !important;
  }

  .tb-col-xl-1 {
    width: calc(4.1666% * 1) !important;
  }

  .tb-col-xl-2 {
    width: calc(4.1666% * 2) !important;
  }

  .tb-col-xl-3 {
    width: calc(4.1666% * 3) !important;
  }

  .tb-col-xl-4 {
    width: calc(4.1666% * 4) !important;
  }

  .tb-col-xl-5 {
    width: calc(4.1666% * 5) !important;
  }

  .tb-col-xl-6 {
    width: calc(4.1666% * 6) !important;
  }

  .tb-col-xl-7 {
    width: calc(4.1666% * 7) !important;
  }

  .tb-col-xl-8 {
    width: calc(4.1666% * 8) !important;
  }

  .tb-col-xl-9 {
    width: calc(4.1666% * 9) !important;
  }

  .tb-col-xl-10 {
    width: calc(4.1666% * 10) !important;
  }

  .tb-col-xl-11 {
    width: calc(4.1666% * 11) !important;
  }

  .tb-col-xl-12 {
    width: calc(4.1666% * 12) !important;
  }

  .tb-col-xl-13 {
    width: calc(4.1666% * 13) !important;
  }

  .tb-col-xl-14 {
    width: calc(4.1666% * 14) !important;
  }

  .tb-col-xl-15 {
    width: calc(4.1666% * 15) !important;
  }

  .tb-col-xl-16 {
    width: calc(4.1666% * 16) !important;
  }

  .tb-col-xl-17 {
    width: calc(4.1666% * 17) !important;
  }

  .tb-col-xl-18 {
    width: calc(4.1666% * 18) !important;
  }

  .tb-col-xl-19 {
    width: calc(4.1666% * 19) !important;
  }

  .tb-col-xl-20 {
    width: calc(4.1666% * 20) !important;
  }

  .tb-col-xl-21 {
    width: calc(4.1666% * 21) !important;
  }

  .tb-col-xl-22 {
    width: calc(4.1666% * 22) !important;
  }

  .tb-col-xl-23 {
    width: calc(4.1666% * 23) !important;
  }

  .tb-col-xl-24 {
    width: calc(4.1666% * 24) !important;
  }
}

四、效果呈现

在这里插入图片描述
在这里插入图片描述
至此效果实现

这边 react 官网也在进行开发，也请大家持续关注博主

结语

✨ 每天创作一点点
✨ 开心快乐一整天
✨ 点赞关注加收藏
✨ 美好一天又一天

铁铁们 感谢支持 我需要你们的三连 👍👍👍
请添加图片描述

归来巨星
关注
专栏目录
【React工作记录六十六】ant design Row col样式修改
geyaoisnice的博客
06-26 309
java
react-antd如何使用row和col实现布局，当成div浮动使用
guozhuanchen的博客
05-12 7614
row是行 col是列 span 代表此行要放几列
css相关内容:布局
最新发布
weixin_74384492的博客
08-07 1153
布局考虑的是整个页面的布局，也就是二维条件下页面的布局，我们只需要考虑横向布局和纵向布局两种即可。纵向布局非常简单，只需要借助div标签即可完成，重点是横向布局的设计与实现。
线性布局（Row/Column）
01-12 1982
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。图1Column容器内子元素排列示意图图2Row容器内子元素排列示意图。
react学习(72）--row上面加样式
歌谣的博客
07-27 516
<Row> <Col> <Button style={{ marginTop: '24px', marginBottom: '24px', float: 'right', marginRight: '24px', ...
React工作72:row上面加样式
qq_41632427的博客
07-18 230
react
react-smooth-scroll-hook:一个在React组件中使用平滑滚动的React Hook
04-14
它提供了useSmoothScroll钩子来完成react组件中的平滑滚动行为，并提供了useScrollWatch来返回滚动容器中的某些信息。 这是替换本机scrollTo api的一种更方便的方法。 故事书文档在。 特征 :rocket: 您不需要警告...
spyke-react-hook-router-link:从React Router的Link逻辑中提取的React钩子，可以更轻松地与第三方UI库集成
05-28
从react-router的逻辑中摘录的内容，可以更轻松地与第三方UI库集成。 如果您使用的是UI库并希望呈现链接，则一开始您可能会提出以下建议： 这种方法的问题可能是，您将失去对icon支持（链接对如何渲染它...
react-infinite-scroll-hook:创建无限滚动列表组件的简单钩子
04-30
基本上，我们需要设置一个sentry组件来触发无限加载。 当sentry在屏幕上变为可见或几乎变为可见时（当然是基于我们的配置），它会在IntersectionObserver的帮助下触发无限加载（通过调用onLoadMore回调）。 sentry...
react-modal-hook:使用React Hooks来处理模态的语法糖
05-02
对于简单的模态组件，请查看 ，它与该库配合使用。 目录 安装 npm install --save react-modal-hook 用法 使用ModalProvider为您的应用程序提供模态上下文： import React from "react" ; import ReactDOM from ...
react-code-diff-lite:基于react-hook的代码比对组件
05-05
一个基于diff2html的React diff组件 演示 使用方法 安装 npm install react-code-diff-lite ♡ import React from "react" ; import CodeDiff from "react-code-diff-lite" ; const newStr = `{ a: 1, b: 2, c: ...
react-row:React 组件创建用于通过使用 flex 构建基于行和列（可选可调整大小）的复杂布局
06-10
React排 通过使用flex来创建基于行和列（可选可调整大小）构建复杂布局的 React 组件。 概述 这个想法很简单。 您将子组件添加到<Row>并且每个子组件都将附加到单独的列中。 每个<Column>充当容器，在其中自动计算其尺寸并更改 flex 值。 需要react-draggable支持调整大小，代码使用 ES6 和 Babel 编写。 将需要像 Webpack 这样的模块错误。 用法 只需将您想要在不同列中的所有组件添加为直接子项。 'use strict' ; import React from 'react/addons' ; import Row from './row.js' ; let Example = React . createClass ( { displayName : 'Example' , render (
react row col 如何 让内容 超过长度 还显示_React-Redux-Saga-*？晕了？一篇文章弄懂的实战指南！...
weixin_39626181的博客
12-01 371
前段时间有一个新的项目，前端程序员没有到位，我临时接手。作为一个万年后端，我有点蒙啊。我发现，网上很多教程都过于零散，而且往往针对某一个包，项目的组织也不利于拓展。更可怕的是，每一个项目都有点自己的风格，刚刚接触他们的后端程序员看多了越看越迷糊。比如，如何开始一个新项目？？到底应该如何组织项目文件结构？一个成熟的React项目需要那些基本包？每一个文件夹里应该放什么样的文件？不用的包之间是如何互动...
row and col
weixin_34112900的博客
06-12 624
1.行 &lt;Row gutter={{ md: 6, lg: 12, xl: 12 }}&gt;&lt;/Row&gt; gutter: md: 中等屏幕 桌面显示器 (≥992px) lg: 大屏幕 大桌面显示器 (≥1200px) xl: 2.列 &lt;Col md={6} sm={24}&gt;&lt;/Col&gt; md: 中等屏幕 桌面显示器 (≥992px) sm: 小屏幕 平...
react row col 如何 让内容 超过长度 还显示_React实现音乐播放面板
weixin_39564853的博客
12-19 1026
这段时间在用React模仿一个网易云音乐的Web客户端，由于之前没怎么接触过<audio>标签，入手的时候有点无头绪，实现完后Mark一下。大概就是这么一个播放器如何实现？Layout【外部骨架】简而言之就是怎么把播放面板固定在下面。这里由于我使用了Antd框架，所以就直接用里面的组件Affix了，当然我们可以使用 positon: fixed; bottom: 0px来实现相同的效果...
react row col 如何 让内容 超过长度 还显示_【第 30 期】React 架构的演变 从递归到循环...
weixin_39598584的博客
12-16 423
正文开始~这篇文章是 React 架构演变的第二篇，上一篇主要介绍了更新机制从同步修改为异步，这一篇重点介绍 Fiber 架构下通过循环遍历更新的过程，之所以要使用循环遍历的方式，是因为递归更新过程一旦开始就不能暂停，只能不断向下，直到递归结束或者出现异常。递归更新的实现React 15 的递归更新逻辑是先将需要更新的组件放入脏组件队列(这里在上篇文章已经介绍过，没看过的可以先看看《Re...
bootstrap row col 原理_Bootstrap | 结合代码学习Bootstrap3 栅格系统
weixin_29027285的博客
02-03 3776
开篇的话：大家可能会好奇，技术的滚轮滚滚向前，这个时候怎么还会有博文在介绍Bootstrap 3呢？技术没有好坏之分，只有适合和不适合的区别，因为我们这个项目对IE有明确的要求，所以Bootstrap 3相对来说更适合，栅格系统又是我认为的Bootstrap的精髓，所以呢，我们就开始今天的博文吧～简介Bootstrap中的栅格系统就是通过一系列的行(row)与列(column)的组合创建页面布局。...
c语言中row和col的意思,这段c代码的含义时什么，怎么理解？
weixin_35801437的博客
05-22 1万+
#includevoiddisplay(charcr,intlines,intwidth);intmain(void){intch;//打印字符introws,cols;//行数和列数printf("输入一个字符和两个整数:\n");while((ch=getchar())!='\n')//赋值ch同时；\n做出口{if(scanf("%d%d",&ro...
Element源码系列——Row以及Col组件
热门推荐
马骏超的博客
08-06 1万+
Element源码系列——Row以及Col组件 Element源码系列——Row以及Col组件 序言 Row Col 总结 序言 官网中对Layout 布局的定义是: 通过基础的 24 分栏，迅速简便地创建布局. Element中的栅格系统也与Bootstrap类似,组件开发的目的都是为了解决基本布局定位的问题. Layout主要组件为Row与Col,其中...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

归来巨星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值