組件調(diào)試工具

這真的非常實(shí)用，而且是 Vue 官網(wǎng)提供的。

那 React 有沒(méi)有類似的工具呢?有!今天給大家推薦兩個(gè)類似的調(diào)試工具：react-dev-inspector[2]、click-to-component[3]。

react-dev-inspector

接入這個(gè)庫(kù)以后，在 React 應(yīng)用頁(yè)面按對(duì)應(yīng)的快捷鍵可以開(kāi)啟兩個(gè)功能：

• 獲得類似 Chrome Devtool 元素審查的能力，鼠標(biāo)移入任意元素即可顯示組件信息(組件名、組件對(duì)應(yīng)的文件路徑、元素寬高)
• 點(diǎn)擊任意元素即可跳轉(zhuǎn)到本地對(duì)應(yīng)代碼窗口

整體效果如下：

而且這個(gè)工具目前已經(jīng)支持了：Vite2、next.js、create-react-app、umi3。

click-to-component

顧名思義，點(diǎn)擊后跳轉(zhuǎn)到組件，跟上一個(gè)工具功能類似，不過(guò)相對(duì)而言，我可能更喜歡這個(gè)工具。

click-to-component 同樣是按快捷鍵開(kāi)啟 點(diǎn)擊跳轉(zhuǎn) 的功能，不過(guò)可以由我們來(lái)選擇是跳轉(zhuǎn)當(dāng)前點(diǎn)擊的這個(gè)元素還是跳轉(zhuǎn)到該元素所在的組件。

相比 react-dev-inspector，這個(gè)工具使用起來(lái)比較方便，直接在根目錄引入組件即可，不用配置東西，開(kāi)箱即用。

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(
  
+ 
    
  
);

看下完整的使用效果：

動(dòng)畫(huà)工具

看到一個(gè)挺不錯(cuò) React 動(dòng)畫(huà)庫(kù)，是搭配 react-router 使用的，做的是路由跳轉(zhuǎn)時(shí)，各頁(yè)面之間的移出和展示動(dòng)畫(huà)，非常炫酷~ 很適合大家的個(gè)人項(xiàng)目或官網(wǎng)頁(yè)來(lái)使用

這個(gè)庫(kù)的名字叫 react-page-transition[4]，使用方式非常簡(jiǎn)單，在 router 組件外層包裹一層即可，并可以自定義設(shè)置動(dòng)畫(huà)

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 = () => (
  <>
    Home
    About
  
);

const Home = props => 
Home
;

const About = props => 
About
;

export default function App() {
  return (
    
      
              render={({ location }) => {
          return (
+           +             preset="moveToLeftFromRight"
+             transitionKey={location.pathname}
+           >
              
                
                
              
+           
          );
        }}
      />
    
  );
}

這個(gè)庫(kù)預(yù)設(shè)了很多很多很多動(dòng)畫(huà)(preset)供我們使用，至于有多少嘛，給大家瞅一眼：

preset

簡(jiǎn)單看幾個(gè)炫酷的動(dòng)畫(huà)吧

還不趕緊用起來(lái)?

工具類

最近沒(méi)看到太多好用的工具，就簡(jiǎn)單推薦一個(gè)吧，也是日常經(jīng)常碰到的需求：復(fù)制文本到剪切板，我想應(yīng)該沒(méi)人會(huì)自己原生手寫(xiě)吧?畢竟兼容性那么差，大家都會(huì)選擇用成熟的庫(kù)，一般我們用的都是 copy-to-clipboard[5]，它是命令式編程的使用方式，然后在 React 里大家可能更習(xí)慣了聲明式編程，那就可以用 react-copy-to-clipboard[6]，它也是基于 copy-to-clipboard 封裝的。

兩者使用區(qū)別如下：

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

// react-copy-to-clipboard
  onCopy={this.onCopy}
  text={this.state.value}>
  復(fù)制

最后

好了，今天的分享到此結(jié)束，希望能幫助到大家。

新聞名稱：真的不要錯(cuò)過(guò)這幾個(gè)React工具，好嗎？
本文網(wǎng)址：http://m.5511xx.com/article/cdgdcds.html