如何将React类组件转换为功能组件，反之亦然 - IntelliJ

Question

有时你想快速从无状态组件转到有状态组件，我想是否有某种方法可以让IntelliJ为我做这个（不用创建插件）。

例如，来自：

const Stateless = ({ propsDestructuring }) => {
  console.log('Some logic');

  return (
    <div>Some JSX</div>
  );
};

为：

class Stateful extends Component {
  render() {
    const {
      propsDestructuring
    } = this.props;

    console.log('Some logic');

    return (
      <div>Some JSX</div>
    );
  }
}

或者选择＆＃34;箭头的身体风格＆＃34;显式返回也是有用的，例如从

开始

const Stateless = ({ propsDestructuring }) => (
  <div>Some JSX</div>
);

为：

const Stateless = ({ propsDestructuring }) => {
  return (
    <div>Some JSX</div>
  );
};

使用实时模板在这种情况下不起作用，因为它们不能改变现有代码，只插入新代码。有什么建议吗？

Answer 1

IntelliJ 2018.2现在支持此功能。

  

将React类组件转换为功能组件的新意图。

说明：

按组件定义：

• Mac：选项 + Enter

• Windows： Alt + Enter

它可以双向工作：

引荐来源：Development with React

Answer 2

你可以来自：

onException(IOException.class)
 .maximumRedeliveries(2)
 .onRedelivery(urlChangeProcessor)
 .process(failureProccessor);

from("direct:foo")
 .recipientList(simple("cxf:${exchangeProperty.targetUrl}?dataFormat=POJO"));

为：

SELECT
CASE
WHEN LEN(RIGHT([MyColumn], CHARINDEX('.', REVERSE([MyColumn])))) >= 3
    THEN [MyColumn]
ELSE CAST(CAST([MyColumn] AS NUMERIC(8,1)) AS NVARCHAR(10))
END AS [MyColumn]

FROM [MyTable]

将文本光标放在此处：

const Stateless = ({ propsDestructuring }) => (
  <div>Some JSX</div>
);

按alt-enter键进入以下弹出窗口：

再次按Enter键选择最高结果，它将转换为带括号的箭头功能。

关于类转换的功能，据我所知，没有办法做到这一点，但你总是可以尝试使用find和replace来转换：

const Stateless = ({ propsDestructuring }) => {
  return (
    <div>Some JSX</div>
  );
};

为：

const Stateless = ({ propsDestructuring }) => (
-----------------------------------------^-----

如果将其记录到宏中，它应该加快操作速度。