扩展 html 组件获取属性不起作用

Question

这是我创建自定义 Web 组件的代码。

import S3Uploader from 'containers/S3Uploader';
import React from 'react';
import * as ReactDOM from "react-dom";

class Component extends HTMLElement {
  constructor() {
    super();
  }

  detachedCallback() {
    ReactDOM.unmountComponentAtNode(this);
  }

  createdCallback() {
    console.log("This attributes",this.attributes); //Why the attribute length is 0
    const props = this.getAllProps(this.attributes);
    console.log(props);
    const s3Config = JSON.parse(this.getAttribute('s3-config')); //This is null
    const handleUpload = eval(this.getAttribute('handle-upload'));
    console.log(s3Config,handleUpload);
    ReactDOM.render(<S3Uploader s3Config={s3Config} handleUpload={handleUpload}/>, this);
  }
  getAllProps(attributes) {
    let props = {};
    for (let i = 0; i < attributes.length; i++) {
      props[attributes[i].nodeName] = attributes[i].nodeValue;
    }
    return props;
  }
}



document.registerElement('s3-uploader',Component);

问题是属性长度为 0，并且在 createdCallback 函数中所有属性都为 null。

所以我无法将所需的属性传递给 React 组件。

Answer 1

尝试转换为 V1 规范而不是 V0 规范：

//import S3Uploader from 'containers/S3Uploader';
//import React from 'react';
//import * as ReactDOM from "react-dom";

class Component extends HTMLElement {
  constructor() {
    super();
  }

  disconnectedCallback() {
    //ReactDOM.unmountComponentAtNode(this);
  }

  connectedCallback() {
    console.log("Attribute count",this.attributes.length); //Why the attribute length is 0
    const props = this.getAllProps(this.attributes);
    console.log(props);
    const s3Config = JSON.parse(this.getAttribute('s3-config')); //This is null
    const handleUpload = eval(this.getAttribute('handle-upload'));
    console.log(s3Config,handleUpload);
    //ReactDOM.render(<S3Uploader s3Config={s3Config} handleUpload={handleUpload}/>, this);
  }
  
  getAllProps(attributes) {
    let props = {};
    for (let i = 0; i < attributes.length; i++) {
      props[attributes[i].nodeName] = attributes[i].nodeValue;
    }
    return props;
  }
}

customElements.define('s3-uploader',Component);

<s3-uploader s3-config='{"dog":12}' handle-upload="console.log('testing')"></s3-uploader>

我注释掉了 React 代码，所以这会运行在测试台上，但这有效。

V0 规范已弃用，即将失效。所有组件都应使用 V1 规范编写。

扩展 html 组件获取属性不起作用

Extending a html component get attributes are not working

html

javascript

web-component

reactjs