WebStorm 功能片段 React

Question

有人知道 WebsSorm 中 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;

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

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

AppComponent.propTypes = {
    
};

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

export default AppComponent;