是否有用于以简写方式应用JSX属性的Babel转换器？

Question

在我的代码中，我有很多看起来像

的组件

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

我不想使用<CustomInput ...props>表示法，因为第一个变体允许过滤广泛使用的组件的道具。 我想要的是，以较短的方式传递组件道具，可能就像：

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

有没有能够提供这种能力的巴贝尔变压器？

Answer 1

不需要额外的babel插件。您可以使用速记属性名称+扩展运算符。

示例：

<div class="myclass">
    Unparented text
    <p>Parented text</p>
    More unparented text
    <p>More parented text</p>
</div>

不是最简洁的语法，但将来可能会有所改进。请参阅GitHub discussion thread。