Gibt es einen Babel-Transformator, um JSX-Attribute in Kurzform anzuwenden?

Question

In meinem Code, ich hatte eine Menge von Komponenten, die

function AddressInput(props) { 
const { error, value, onChange, hints } = props; 
return (
    <CustomInput error={error} onChange={onChange} value={value} hints={hints} /> 
); 
} 

I <CustomInput ...props> Notation verwenden möchte nicht wie

aussieht, weil die erste Variante Requisiten zum Filtern für weit verbreitete Komponenten ermöglicht. Was ich will, ist es Bestandteil Requisiten in einem kürzeren Weg passieren, vielleicht wie:

const { error, value, onChange, hints } = props; 
<CustomInput :error :onChange :value :hints /> 

Gibt es irgendwelche babel Transformatoren, die eine solche Fähigkeit zur Verfügung stellen kann?

Answer 1

Kein zusätzliches babel-Plugin erforderlich. Sie können Kurzschrift-Eigenschaftsnamen + Spread-Operator verwenden.

Beispiel:

function AddressInput(props) { 
    const { error, value, onChange, hints } = props; 
    return (<CustomInput {...{error, value, onChange, hints}} />); 
} 

Nicht die knappste Syntax, aber es könnte in Zukunft verbessert werden. Siehe GitHub discussion thread.