Расширение атрибута html-компонента не работает

Это мой код для создания пользовательских веб-компонентов.

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, и все атрибуты имеют значение null в функции createdCallback.

Поэтому я не могу передать необходимые атрибуты для реагирования на компонент.

javascript,html5,reactjs,web-component,

0

Ответов: 1

2 принят

Попробуйте преобразовать в спецификацию 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>

Я прокомментировал код реакции, так что это будет работать на тестовом поле, но это работает.

Спецификация V0 устарела и скоро будет мертвой. Все компоненты должны быть написаны с использованием спецификации V1.

JavaScript, html5, reactjs, веб-компонент,
Похожие вопросы
Яндекс.Метрика