React基础[五]:React组件

1、什么是组件？

此时App是一个单体，我们在真正做项目的时候，我们需要把它分解成可管理的，可描述的组件。 React 对于什么是组件和什么不是组件并没有任何硬性规定，这完全取决于你！

2、定义第一个组件

如果你没有组件开发的经验，那你一定要记住我的准则:

• 如果它在程序里是一个块，那么它就是一个组件
• 如果它在程序里面经常出现，那么它也是组件

使用通用的 UI 元素作为组件，可以让你只更改一处，就能更改所有使用该组件的地方。

3、编写Card组件

例如项目中经常会用到一个卡片组件我们来编写一个卡片组件。我们新建一个文件夹components。

● components
  ● Card
    ○ index.tsx
    ○ index.css

index.css

.card {
    background: white;
    border-radius: 5px;
    border: 1px solid #ccc;
    max-width: 400px;
    box-shadow: 2px 2px 2px #ccc;

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding: 12px;
        background: #0885ff;
        color: white;

        div:last-child {
            font-size: 14px;
        }
    }

    main {
        min-height: 200px;
        border-bottom: 1px solid #ccc;
        padding: 10px;
    }
    footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 10px;
        button {
            background: #0885ff;
            margin-left: 10px;
            padding: 3px 10px;
            color: #fff
        }
    }
}

index.tsx：

import './index.css'

export default function Card() {
  return (
    <div className='card'>
      <header>
        <div>标题</div>
        <div>副标题</div>
      </header>
      <main>
        内容区域
      </main>
      <footer>
        <button>确认</button>
        <button>取消</button>
      </footer>
    </div>
  )
}

App.tsx 引入Card 组件。这种称之为局部组件在哪一个页面需要使用就在哪一个页面引入即可！

import Card from './components/Card'
function App() {
  return (
    <>
      <Card></Card>
      <Card></Card>
      <Card></Card>
    </>
  )
}

4、全局组件

目录结构：

● components
  ● Message
    ○ index.tsx
    ○ index.css

Message/index.css：

.message {
    background: #0885ff;
    color: #fff;
    width: 160px;
    height: 30px;
    position: fixed;
    top: 10px;
    left:50%;
    margin-left: -80px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 30px;
    border-radius: 5px;
}

Message/index.tsx:

创建一个queue队列因为可以点击多次需要存到数组，并且累加每次的高度，使元素没有进行重叠，而是顺移，所以需要一个queue队列，删除的时候就按顺序删除即可。

import ReactDom from 'react-dom/client'
import './index.css'
const Message = () => {
  return (
    <div>
      提示组件
    </div>
  )
}
interface Itesm {
  messageContainer: HTMLDivElement
  root: ReactDom.Root
}
const queue: Itesm[] = []
window.onShow = () => {
  const messageContainer = document.createElement('div')
  messageContainer.className = 'message'
  messageContainer.style.top = `${queue.length * 50}px`
  document.body.appendChild(messageContainer)
  // 容器如何关联
  // 容器注册成根组件
  const root = ReactDom.createRoot(messageContainer)
  root.render(<Message />) //渲染组件
  queue.push({
    messageContainer,
    root
  })
  //2秒后移除
  setTimeout(() => {
    const item = queue.find(item => item.messageContainer === messageContainer)!
    item.root.unmount() //卸载
    document.body.removeChild(item.messageContainer)
    queue.splice(queue.indexOf(item), 1)
  }, 2000)
}

//声明扩充
declare global {
  interface Window {
    onShow: () => void
  }
}


export default Message

在main.tsx 注入即可使用 import ‘./components/Message/index.tsx’。在App.tsx Card.tsx 使用

<button onClick={() => window.onShow()}>确认</button>