WebStorm 功能片段 React

Question

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

到目前为止我只找到了类组件的快捷方式。

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

并选中以下复选框：

• 声明
• 高层声明

Answer 3

您可以在网络风暴中通过自己的关键字配置自己的模板

前往

settings -> editor -> live templates

1. 选择

   React

   ，在右侧按

   add button

   或

   alt + insert

   创建新模板按键绑定基于Linux系统
2. 单击实时模板，它将在下面打开一个窗格
3. 添加您想要的缩写，在我的情况下，我想要一个带有导出功能的箭头功能，所以我添加了

   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. 您可以在

   variable declarations

   上编辑这些

   edit variables

   以获得您想要的行为
6. 上述模板的变量声明
7. 将应用程序上下文设置为java脚本并输入脚本，单击保存并应用您的模板已准备就绪

Answer 4

我。

rsf

- 创建一个无状态 React 组件作为没有 PropTypes 的命名函数。

import React from 'react';

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

export default AppComponent;

ii.

rsfp

- 使用 PropTypes 创建一个无状态 React 组件作为命名函数。

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

AppComponent.propTypes = {
    
};

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

export default AppComponent;