WebStorm 功能片段 React

Question

有人知道 WebStorm 中 React 功能組件片段的快捷方式是什么嗎？

到目前為止，我只找到了 class 組件的快捷方式。

Answer 1

請嘗試rsf - 它會創建類似的代碼

import React from 'react';

function Func(props) {
  return (<div></div>);
}

export default Func;

Answer 2

我經常將rsc實時模板用於新組件。

這將創建如下代碼：

import React from 'react';

const MyComponent = () => {
    return (
        <div>
        
        </div>
    );
};

export default MyComponent;

除此之外，我在 JavaScript 類別中創建了自己的實時模板，用於創建箭頭函數以節省更多時間，它創建的代碼如下：

const myFunction = () => {
    
};

只需使用此模板文本在 JavaScript 類別下添加一個新的實時模板：

const $1$ = () => {
    $END$
};

並確保將applicable in JavaScript and TypeScript和 select 的復選框設置為：

• 陳述
• 頂級聲明

Answer 3

一世。 'rsf' 創建一個無狀態的 React 組件，命名為 function，不帶 PropTypes。

import React from 'react';

function AppComponent(props) {
    return (
        <div></div>
    );
}

export default AppComponent;

ii. 'rsfp' 創建一個無狀態的 React 組件，命名為 function 和 PropTypes。

import React from 'react';
import PropTypes from 'prop-types';

AppComponent.propTypes = {
    
};

function AppComponent(props) {
    return (
        <div></div>
    );
}

export default AppComponent;

Answer 4

您可以通過自己的關鍵字在網絡風暴中配置自己的模板

go 到settings -> editor -> live templates

1. 選擇React ，在右側按下add button或alt + insert以創建新模板鍵綁定基於 Linux 系統
2. 單擊實時模板，它將在下面打開一個窗格
3. 在我的情況下添加您想要的縮寫我想要一個帶有導出的箭頭 function 所以我添加了rafce ，描述是可選的
4. 在實時模板中粘貼您所需的代碼生成格式作為您的縮寫

例子：

// Created on $DATE$ by $USER$:  for project $project$

import React from 'react'

const $FileName$ = () => {
  return (
    <div>$FileName$</div>
  )
}

export default $FileName$

${var_name}$ can be used to describe a inbuilt function on the ide or your custom variable以獲取更多參考，請參閱有關實時模板的內置函數的 webstorm 文檔webstorm 實時模板

5. 您可以在edit variables上編輯這些variable declarations以獲得您想要的行為
6. 上述模板的變量聲明
7. 將應用程序上下文設置為 java 腳本並鍵入腳本單擊保存並應用您的模板已准備就緒