Hızlı bir şekilde JSX React durum bilgisi olmayan bileşeni JSX'e geçiş Reali durum bilgisi bileşeni IntelliJ'teki

Question

Bazen durağan olmayan bir bileşenden durumsal bir bileşene hızlıca geçmek istersiniz ve IntelliJ'u benim için yapmanın bir yolu varsa düşünüyorum (eklenti oluşturmadan).

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

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

için:

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

    console.log('Some logic'); 

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

Alternatif da yararlı olacağını açıkça dönüşüne "Ok vücut tarzı" giden

, örneğin Örneğin

, giden için

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

giden: bunlar mevcut kodu mutasyona olamaz gibi bu senaryoda işe yaramaz canlı şablonlarını kullanma

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

, yalnızca yeni yerleştirin. Baska öneri?

Answer 1

Sen gidebilirsiniz: Burada metin imleci koyarak

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

:

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

için

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

Ve basarak aşağıdaki açılır pencere çıkarmak için alt-enter:

En iyi sonucu seçmek için tekrar enter tuşuna basın ve parantez ile bir ok işlevine dönüştürülür. sınıf dönüşüm fonksiyonu ile ilgili olarak

, bildiğim kadarıyla bunu yapmak için hiçbir yolu yoktur farkındayım, ama her zaman dönüştürmek için find kullanılarak denemek ve yerini alabilecek şekilde:

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

için:

class $1 extends React.Component { 

Bunu bir makroya kaydederseniz, bu işlemi biraz hızlandırmalısınız.