React 项目里，如何快速定位你的组件源码？

奇舞精选 · 公众号 · · 2024-07-15 18:08

正文

如果说业务开发中最重要的能力，那定位代码的能力肯定是其中之一。

业务项目一般代码都很多，你拿到一个需求之后，可能改起来不难，但是要定位在哪里改比较难。

特别是接手别人写的代码的时候。

大家都是怎么在不熟悉的项目里定位的代码呢？

很多都学都是搜文案，搜 className。

这样没问题，但如果你用了 styled-component 之类的方案之后，className 都是动态生成的：

而且不少项目都做了国际化，你搜文案会搜到资源包里，而不是组件代码里：

当然，你可以进一步根据国际化的 key 来搜索源码的对应组件。

但这样总归比较麻烦，而且还不一定能搜到准确的位置。

那有什么好的办法可以快速定位代码么？

有，就是 click-to-react-component。

我们创建个项目：

npx create-vte

改下 main.tsx：

安装 antd，我们随便写几个页面：

npm install
npm install --save antd

App.tsx：

import React from 'react';
import { ColorPicker, Space } from 'antd';
import Aaa from './Aaa';

const Demo = () => (
  <div>
    <Space>
      <Space direction="vertical">
        <ColorPicker defaultValue="#1677ff" size="small" />
        <ColorPicker defaultValue="#1677ff" />
        <ColorPicker defaultValue="#1677ff" size="large" />
      Space>
      <Space direction="vertical">
        <ColorPicker defaultValue="#1677ff" size="small" showText />
        <ColorPicker defaultValue="#1677ff" showText />
        <ColorPicker defaultValue="#1677ff" size="large" showText />
      Space>
    Space>
    <Aaa>Aaa>
  div>
);

export default Demo;

Aaa.tsx：

import React, { useState } from 'react';
import { Slider, Switch } from 'antd';
import Bbb from './Bbb';

const Aaa: React.FC = () => {
  const [disabled, setDisabled] = useState(false);

  const onChange = (checked: boolean) => {
    setDisabled(checked);
  };

  return (
    <>
        <div>
            <Slider defaultValue={30} disabled={disabled} />
            <Slider range defaultValue={[20, 50]} disabled={disabled} />
            Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
        div> 
        <Bbb>Bbb>
    >
  );
};

export default Aaa;

Bbb.tsx：

import React from 'react';
import { Card, Space } from 'antd';

const Bbb: React.FC = () => (
  <Space direction="vertical" size={16}>
    <Card title="Default size card" extra={




    
<a href="#">Morea>} style={{ width: 300 }}>
      <p>Card contentp>
      <p>Card contentp>
      <p>Card contentp>
    Card>
    <Card size="small" title="Small size card" extra={<a href="#">Morea>} style={{ width: 300 }}>
      <p>Card contentp>
      <p>Card contentp>
      <p>Card contentp>
    Card>
  Space>
);

export default Bbb;

这些都是从 antd 官网复制的 demo 代码。

不用管具体的代码内容，我们只需要看下怎么定位代码。

把开发服务跑起来：

npm run dev

渲染出来是这样的：

如果我们想定位下面卡片的代码，就可以通过搜索文案或者 className：

但复杂项目就不行了。

这时候可以引入 click-to-react-component：

npm install --save-dev click-to-react-component

在 main.tsx 引入下：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
// @ts-ignore
import { ClickToComponent } from 'click-to-react-component';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <>
        <ClickToComponent />
        <App />
    >
)