第21章 使用第三方React组件

大白话：别人写好的 React 组件，你直接拿来用，不用自己从零写。

想象一下——你要在博客里放一个音乐播放器：

• 自己写：需要处理播放/暂停、进度条、音量控制、浏览器兼容……可能要写几百行代码
• 用第三方组件：npm install react-h5-audio-player，三行代码搞定

这就是第三方组件的价值：站在巨人的肩膀上，不重复造轮子。

npm 就是 JavaScript 的"应用商店"。你可以在 npmjs.com 上搜索任何你需要的功能。

使用第三方组件分两步：安装（下载到你的项目）→ 导入（在代码里引用）。

// 假设你要使用 react-markdown
// 第一步：在终端安装
// npm install react-markdown

// 第二步：在代码中导入并使用
import React from 'react';
import ReactMarkdown from 'react-markdown';

function App() {
  const content = '# 你好世界\n\n这是用 react-markdown 渲染的！';

  return (
    <div>
      <ReactMarkdown>{content}</ReactMarkdown>
    </div>
  );
}

export default App;复制

react-markdown 能把 Markdown 文本自动转换成带格式的 HTML。比如 # 标题 变成 <h1>标题</h1>，**粗体** 变成 <strong>粗体</strong>。

为什么需要它？ 博客文章正文通常用 Markdown 写，但浏览器只认 HTML。react-markdown 就是翻译官。

// App.jsx
import React from 'react';
import ReactMarkdown from 'react-markdown';

function BlogArticle() {
  // 模拟一篇 Markdown 格式的博客文章
  const markdownContent = `
# 我的第一次旅行

## 出发前的准备

这是一篇用 **Markdown** 写的博客文章。

### 需要带的东西

- 护照
- 相机
- 充电器

### 行程安排

| 日期 | 地点 | 活动 |
|------|------|------|
| 第1天 | 北京 | 故宫 |
| 第2天 | 上海 | 外滩 |

> 旅行的意义不在于到达，而在于出发。

\`\`\`js
console.log('旅行开始！');
\`\`\`
`;

  return (
    <div style={{ maxWidth: 700, margin: '0 auto', padding: 20 }}>
      <ReactMarkdown>{markdownContent}</ReactMarkdown>
    </div>
  );
}

export default BlogArticle;复制

react-h5-audio-player 是一个开箱即用的音乐播放器组件。你只需要告诉它"播放哪首歌"，它就给你一个带播放/暂停按钮、进度条、音量控制的播放器。

npm install react-h5-audio-player复制

// MusicPlayer.jsx
import React from 'react';
import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

function MusicPlayer() {
  return (
    <div style={{ maxWidth: 500, margin: '20px auto' }}>
      <h2>🎵 博客音乐播放器</h2>
      <AudioPlayer
        src="/music/my-song.mp3"
        onPlay={() => console.log('开始播放')}
        onPause={() => console.log('暂停播放')}
        showJumpControls={true}
        layout="horizontal"
      />
    </div>
  );
}

export default MusicPlayer;复制

// ArticlePage.jsx
import React from 'react';
import ReactMarkdown from 'react-markdown';
import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';

function ArticlePage() {
  const article = `
# 夏日午后

听听这首音乐，感受夏天的气息。

## 歌词

阳光洒在窗台上
微风轻轻吹过...
`;

  return (
    <div style={{ maxWidth: 700, margin: '0 auto', padding: 20 }}>
      <ReactMarkdown>{article}</ReactMarkdown>
      <hr />
      <h3>🎶 配乐</h3>
      <AudioPlayer src="/music/summer.mp3" />
    </div>
  );
}

export default ArticlePage;复制

# 安装组件
npm install react-markdown
npm install react-h5-audio-player
npm install react-player

# 卸载组件
npm uninstall 包名

# 查看已安装的包
npm list复制