Babel 插件: 注释反应
这是一个Babel插件,它能对具有稳定属性的组件进行注释,可用于使用Freshpaint进行选择. 这在使用生成组件或重排元素动态名称的回放系统时最为有用.
对于网络上的反应,属性是 data-component, (中文(简体) ), data-element,以及 data-source-file。对于反应土著,属性是 dataComponent, (中文(简体) ), dataElement,以及 dataSourceFile。 。 。 .
组件属性名称 React.Component 和元素属性名称 View 或者说 Image 或诸如DOM元素的发射器 Fragment。 。 。 .
示例输入 :
class HelloComponent extends Component {
render() {
return <div>
<h1>Hello world</h1>
</div>;
}
}
联合来文产出实例:
class HelloComponent extends Component {
render() {
return React.createElement("div", {
"data-component": "HelloComponent",
"data-file-source": "hello-component.js"
}, React.createElement("h1", {
null
}, "Hello world"));
}
}
最后意见:
<div data-component="HelloComponent" data-file-source="hello-component.js">
<h1>Hello world</h1>
</div>
要激活原始支持, 您必须在 native 类似插件选项 :
plugins: [
["@freshpaint/babel-plugin-annotate-react", { native: true }]
]
默认情况下, 插件没有注释 React.Fragments 因为它们可能包含也可能不包含一个最终成为HTML元素的孩子.
一个没有儿童因素的例子:
const componentName = () => (
<Fragment>Hello, there.</Fragment>
);
儿童因素的例子:
const componentName = () => (
<Fragment>
Some text
<h1>Hello, there.</h1> /* This one could be annotated */
<a href="#foo">Click me</a>
</Fragment>
);
如果您希望插件尝试对由碎片( 如果存在) 创建的第一个 HTML 元素进行注释, 请设置 annotate-fragments 旗帜 :
plugins: [
["@freshpaint/babel-plugin-annotate-react", { "annotate-fragments": true }]
]
我们有一些样本可以演示这个插件:
添加属性的许多逻辑来源于 变换反应- qa 类 插件 .