真的不要錯過這幾個 React 工具好嗎？

大家好，我是 零一 ，今天是 React 實用小工具專場 ，主要為大家分享一些看到的比較有意思、提升效率的工具，大家可以按需瞭解使用

元件除錯工具

寫過 Vue 的讀者一定用過官方提供的一個瀏覽器除錯工具 vue-devtool ^[1] ，它支援在瀏覽器中除錯元件時，點選對應的按鈕開啟該元件對應你原生代碼的檔案

這真的非常實用，而且是 Vue 官網提供的

那 React 有沒有類似的工具呢？有！今天給大家推薦兩個類似的除錯工具： react-dev-inspector ^[2] 、 click-to-component ^[3]

react-dev-inspector

接入這個庫以後，在 React 應用頁面按對應的快捷鍵可以開啟兩個功能：

• 獲得類似 Chrome Devtool 元素審查的能力，滑鼠移入任意元素即可顯示元件資訊（元件名、元件對應的檔案路徑、元素寬高）

• 點選任意元素即可跳轉到本地對應程式碼視窗

整體效果如下：

而且這個工具目前已經支援了： Vite2 、 next.js 、 create-react-app 、 umi3

click-to-component

顧名思義，點選後跳轉到元件，跟上一個工具功能類似，不過相對而言，我可能更喜歡這個工具

click-to-component 同樣是按快捷鍵開啟 點選跳轉 的功能，不過可以由我們來選擇是跳轉當前點選的這個元素還是跳轉到該元素所在的元件

相比 react-dev-inspector ，這個工具使用起來比較方便，直接在根目錄引入元件即可，不用配置東西，開箱即用

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
+ import { ClickToComponent } from 'click-to-react-component';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
+ <ClickToComponent />
    <App />
  </React.StrictMode>
);

看下完整的使用效果：

動畫工具

看到一個挺不錯 React 動畫庫，是搭配 react-router 使用的，做的是路由跳轉時，各頁面之間的移出和展示動畫，非常炫酷~ 很適合大家的個人專案或官網頁來使用

這個庫的名字叫 react-page-transition ^[4] ，使用方式非常簡單，在 router 元件外層包裹一層即可，並可以自定義設定動畫

import React from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
+ import { PageTransition } from '@steveeeie/react-page-transition';
import './styles.css';

const Links = () => (
  <>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
  </>
);

const Home = props => <h1>Home</h1>;

const About = props => <h1>About</h1>;

export default function App() {
  return (
    <BrowserRouter>
      <Links />
      <Route
        render={({ location }) => {
          return (
+           <PageTransition
+             preset="moveToLeftFromRight"
+             transitionKey={location.pathname}
+           >
              <Switch location={location}>
                <Route exact path="/" component={Home} />
                <Route exact path="/about" component={About} />
              </Switch>
+           </PageTransition>
          );
        }}
      />
    </BrowserRouter>
  );
}

這個庫預設了 很多很多很多 動畫（preset）供我們使用，至於有多少嘛，給大家瞅一眼：

簡單看幾個炫酷的動畫吧

還不趕緊用起來？

工具類

最近沒看到太多好用的工具，就簡單推薦一個吧，也是日常經常碰到的需求： 複製文字到剪下板 ，我想應該沒人會自己原生手寫吧？畢竟相容性那麼差，大家都會選擇用成熟的庫，一般我們用的都是 copy-to-clipboard ^[5] ，它是指令式程式設計的使用方式，然後在 React 裡大家可能更習慣了宣告式程式設計，那就可以用 react-copy-to-clipboard ^[6] ，它也是基於 copy-to-clipboard 封裝的

兩者使用區別如下：

// copy-to-clipboard
copy('Text', {
  debug: true,
  message: 'Press #{key} to copy',
});

// react-copy-to-clipboard
<CopyToClipboard
  onCopy={this.onCopy}
  text={this.state.value}>
  <button onClick={this.onClick}>複製</button>
</CopyToClipboard>

最後

好了，今天的分享到此結束，希望能幫助到大家~

• 如果你們還有更不錯的實用小工具，歡迎評論區留言，或者私聊我

• 你們還想了解哪些工具，也歡迎評論區留言，爭取整理一波，下次分享~

我是 零一 ，分享技術，不止前端！下期見~

參考資料

往期推薦