12、React 组件样式与 TypeScript 基础入门

React 组件样式与 TypeScript 基础入门

1. React 组件样式处理

在 React 开发中，我们为组件添加了静态过渡效果，使得背景颜色能够淡入淡出。在调用新的 ButtonSquare 组件时，和调用其他 React 组件的方式相同，例如在 seat.tsx 文件中：

return (
  <td>
    <ButtonSquare status={status} onClick={changeState}>
      {seatNumber + 1}
    </ButtonSquare>
  </td>
)

这里我们像处理常规 React 组件一样传递 props，包括 onClick 事件处理。当座位状态改变时，props 也会改变，从而导致 ButtonSquare 组件重新渲染并重新计算其背景颜色。

如果样式组件包裹的是 HTML 元素，作为 props 传递的任何已知 HTML 属性都会透明地传递给底层 HTML，即使在定义样式组件时将其用作 props。如果样式组件包裹的是另一个 React 组件，那么所有 props 都会传递给被包裹的组件。

还有一个特殊的 prop as ，如果你希望最外层的 HTML 标签不是由 styled-components 定义的标签，可以使用它。例如，