reactjs – 如何将React类组件转换为功能组件,反之亦然 – Intel

发布时间：2020-12-15 05:08:06 所属栏目：百科来源：网络整理

导读：有时候你想快速从无状态组件转到有状态组件,我想是否有办法让IntelliJ为我做这个(没有创建插件). 例如,从： const Stateless = ({ propsDestructuring }) = { console.log('Some logic'); return ( divSome JSX/div );}; 至： class Stateful extends Compon

有时候你想快速从无状态组件转到有状态组件,我想是否有办法让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>
    );
  }
}

或者从“箭头体型”到显式返回也是有用的,例如,来自

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

至：

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

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

你可以从：

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

至：

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

将文本光标放在这里：

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

然后按alt-enter以获得以下弹出窗口：

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

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

const (.*) = (.*) => {

至：

class $1 extends React.Component {

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!