)
}
}
```
然后,您需要创建一个模型来定义 DOM 如何解析成反应属性 .
```jsx
class ButtonModel extends DOMModel {
@byContentVal text = "something";
@byAttrVal weight;
@registerEvent("change") change;
}
```
您创建自定义元素
```jsx
const ButtonCustomElement = createCustomElement(ReactButton, ButtonModel, "container");
```
然后注册
```js
window.customElements.define("test-button", ButtonCustomElement);
```
#### 确定反应部分将在哪里提供
在定义自定义元素时,您可以通过指定 `renderRoot` 属性. 可能的价值是:
- 集装箱
这将在自定义元素内产生额外的 div , 反应组件将在那里提供 . 这样做是有用的,因为React会移除它所制成的容器元件的所有儿童.
所以,如果您想要从自定义元素的标记中解析值并修改它们,则元素会在初始渲染后丢失.
例如:
```js
My Button
```
> 如果我们不在一个容器里做 `my-button-label` 元素会在渲染时被 React 移除 .
- 阴影旋转
这将决定自定义元素"影子"的创建,并将在其中提供"反应"组件
- 元素
React 组件将在自定义元素中直接渲染出.
#### 扩展自定义元素
默认情况下, 我们提供创建自定义元素的功能 `createCustomElement`。此选项包含默认行为,但不允许元素扩展.
这可以被绕过,而自定义Element可以以新的能力来扩展.
```js
import { CustomElement } from "@adobe/react-webcomponent";
class ButtonCustomElement extends CustomElement {
constructor() {
super();
this._custom = 3;
}
get custom() {
return this._custom;
}
set custom(value) {
this._custom = value;
}
};
ButtonCustomElement.observedAttributes = Model.prototype.attributes;
ButtonCustomElement.domModel = Model;
ButtonCustomElement.ReactComponent = ReactComponent;
ButtonCustomElement.renderRoot = "container"; // optional, defaults to "element"
window.customElements.define("test-button", ButtonCustomElement);
```
### DOM 模式
从将一个 DOM 节点转换为模型,这种功能是可逆的. 该型号由一系列专业的装饰师来装饰. 每个装饰者将解析圆顶并构建模型:
- [由 AttrVal 编辑](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-byattrval)
- [由 Boolean AttrVal 编辑](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bybooleanattrval)
- [由 JsonAttrVal 编辑](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-byjsonattrval)
- [ưμ㼯A](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bycontentval)
- [按内容](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bycontent)
- [按儿童状况分类](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bychildcontentval)
- [按儿童参考资料](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bychildref)
- [按模式](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bymodel)
- [按“儿童模式”](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bychildmodelval)
- [儿童参考文件](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bychildrenrefarray)
- [由儿童Type阵列](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-bychildrentypearray)
- [注册事件](https://npmcn.com/package/%40adobe/react-webcomponent/#readme-registerevent)
#### 校对:Soup.
解析元素并设置与元素属性值对应的值
```js
@byAttrVal(attrName:string) - defaults to the name of the property that it decorates.
```
```js
class Model extends DOMModel {
@byAttrVal() weight;
@byAttrVal("custom-attribute-name") reactPropName;
}
```
用法 :
```js
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
weight: "3",
reactPropName: "some value"
}
```
#### 由 Boolean AttrVal 编辑
解析元素,并设定元素上属性存在的对应值.
属性的值被忽略,只有属性的存在决定了值
```js
@byBooleanAttrVal(attrName:string) - defaults to the name of the property it decorates
```
```js
class Model extends DOMModel {
@byBooleanAttrVal() checked;
@byBooleanAttrVal("is-required") required;
}
```
用法 :
```js
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
checked: true,
required: undefined
}
model.fromDOM(document.getElementById("elem"));
model ~ {
checked: true,
required: true
}
```
#### 由 JsonAttrVal 编辑
通过使用 `JSON.parse`。 。 。 .
```js
class Model extends DOMModel {
@byJsonAttrVal() obj;
@byJsonAttrVal("alias-attr") anotherObj;
}
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
obj: [{"example":1},{"test":2}],
anotherObj: [{"other":"example},{"test":3}]
}
```
#### ưμ㼯A
解析元素并设定值到 `innerText` ,该元素.
```js
class Model extends DOMModel {
@byContentVal() label;
}
My Label
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
label: "My Label"
}
```
#### 按内容
此装饰器允许您捕获一个由 CSS 选择器匹配的 DOM 节点 . 这可用于再现儿童专断的DOM内容,可能不是 与 React 一起转换,输入您的网页组件。 一旦解析完成, 字段 在模型中将包含一个反应组件,代表 DOM 内容 将重新做父母.
当 React 组件被挂起时会移动 DOM 内容 。 还有,内容 如果反应组件后来被卸载,则将被放回原位置.
```js
@byContent(attrName:selector) - the CSS selector that will match the child node.
```
```js
class Model extends DOMModel {
@byContent('.content') content;
}
This will be reparented
const model = new Model().fromDOM(document.getElementById("elem"));
ReactDOM.render(
{ model.content }
, document.getElementById("mount-point"))
// Once React has rendered the above component, the DOM will look like this
This will be reparented
```
#### 按儿童状况分类
分析元素寻找匹配给定选择器并设定值的元素 `innerText` 内容
```js
class Model extends DOMModel {
@byChildContentVal("custom-label") label;
}
My Label
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
label: "My Label"
}
```
#### 按儿童参考资料
解析元素并寻找一个匹配给定选择器的子元素, 并设定以给定模型解析子元素的结果值
```js
class CustomLabelModel extends DOMModel {
@byContentVal() value;
@byAttrVal() required;
}
class Model extends DOMModel {
@byChildContentVal("custom-label", CustomLabelModel) label;
}
My Label
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
label: {
value: "My Label",
required: true
}
}
```
#### 按模式
指定在元素上运行一个给定模型的值. 这使得元素模型可以保存在不同的属性上而不是直接保存在模型上.
```js
class CustomModel extends DOMModel {
@byContentVal() value;
@byAttrVal() required;
}
class Model extends DOMModel {
@byModelVal() item;
}
Content
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
item: {
value: "Content",
required: true
}
}
```
#### 按“儿童模式”
通过从自定义 elem 中获取模型值来解析元素并设定值. 此属性仅在有自定义元素解析时返回 .
使用开头定义的按钮 :
```js
window.customElements.define("test-button", ButtonCustomElement);
```
我们定义一个模型
```js
class Model extends DOMModel {
@byChildModelVal("test-button") button;
}
Click me
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
button: {
weight: 3,
text: "Click me"
}
}
```
这里的根本区别在于模型在另一个自定义元素中被定义,并在这个模型中被再用. 所以它不会被重新定义.
#### 儿童参考文件
解析元素子并选择所有匹配所提供选择器的元素.
对于每个元素,它使用被引用的模型来解析元素的值.
由此而来的所有数值阵列被存储为被装饰的地产上的价值.
```js
class OptionModel extends DOMModel {
@byContentVal() content;
@byAttrVal() value;
@byBooleanAttrVal() selected;
}
class SelectModel extends DOMModel {
@byChildrenRefArray("option", OptionModel) options;
}
const model = new Model().fromDOM(document.getElementById("elem"));
model ~ {
options: [{value: 1, content: "Amsterdam"}, {value: 2, content: "Berlin"}, {value: 3, content: "London"}]
}
```
#### 由儿童Type阵列
如果节点Name与所提供地图中的节点相匹配, 则该节点将对该孩子进行相应的模型分析 .
```js
class Child1Model extends DOMModel {
@byAttrVal() checked;
}
class Child2Model extends DOMModel {
@byAttrVal() selected;
}
class Model extends DOMModel {
@byChildrenTypeArray({
"child-one": Child1Model,
"child-two": Child2Model
}) items;
}