代码之家 › 专栏 › 技术社区 › ÐÐ¾Ð³Ð´Ð°Ð½ ÐÐ¾ÑÐ±Ð°ÑÐµÐ½ÐºÐ¾

是否有一个Babel transformer用于以速记方式应用JSX属性?

jsx babeljs

ÐÐ¾Ð³Ð´Ð°Ð½ ÐÐ¾ÑÐ±Ð°ÑÐµÐ½ÐºÐ¾ · 技术社区 · 7 年前

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 />

有没有巴别塔变形金刚可以提供这样的能力?

1 回复 | 直到 7 年前

Luke Horvat 7 年前

没有额外的巴别塔插件是必要的。可以使用速记属性名称+扩展运算符。

例子:

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

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

推荐文章

theJuls · .babelrc破坏语义ui和下一个应用程序

7 年前

sdgfsdh · 巴别塔插件可以扩展解析器来添加新的关键字吗?

7 年前

codematix · webpack 4.7是否仍需要babel loader。十、

7 年前

Homan · 模块分析失败:使用webpack dev服务器的意外令牌

7 年前

FabianCook · react中箭头函数的优化

7 年前

OneOfOne · 如何将babel输出类作为命名函数?

7 年前

Valerio Emanuele · 使用Webpack 4.5+Babel 6+React 16导入JSON时出错

7 年前

CoderKK · Web包生成错误

7 年前

Zhengquan Bai · Web包4中的babel loader无法使用树抖动

7 年前

Lordrem · 如何在Web包中使用外部库

7 年前