该视频仅会员有权观看
立即开通课程「React.js 前端应用开发实践」权限。
- 继续练习定义React组件，创建一个通用的按钮组件。
- 按钮组件将替换应用页头的登录和退出按钮。
- 组件通过属性自定义显示，文件名为
AppButton.tsx，样式文件AppButton.css，放置于src/components。
AppButton函数组件支持children（ReactNode）、variant（primary或bordered）和onClick（MouseEvent处理函数）属性。- 导入
ReactNode和MouseEvent处理函数，引入组件样式表。
- 组件类名为
app-button，属性variant用于设置不同样式。
- 样式文件定义无边框、背景颜色、内边距、字体大小、圆角等基础样式，以及
primary和bordered的特定样式。
- 在
AppHeader组件中使用AppButton替换原先的按钮元素，登录按钮设置variant为primary，退出按钮为bordered。
- 在浏览器中预览，验证新的按钮样式和功能。
