Элемент стиля ReactDOM пустой в createElement

Question

По некоторым причинам при попытке создать элемент с определенным стилем это приводит к тому, что стиль не применяется.

    const breakpointStyle = {
      height: 123,
      display: 'block',
      width: '100%',
      clear: 'both',
    };

    const breakpointElement = document.createElement(
      'div',
      { style: { breakpointStyle } },
      ' '
    );

В результате получается пустой div без стиля.

<div> </div>

Я использую insertBefore, чтобы вставить его, и div появляется в источнике.Есть идеи, что я делаю не так?

Answer 1

Насколько я понимаю, второй аргумент createElement не должен смешиваться с option, как свойствами элемента, так и с ElementCreationOptions.Если я правильно понимаю ваш вопрос, это то, что здесь произошло.

Второй аргумент ожидает строковое значение, идентифицирующее экземпляр элемента.Это позволяет, например, создавать пользовательские элементы, настраивая встроенные.

В вашем случае вы можете написать:

class MyCustomDiv extends HTMLDivElement {
  constructor() {
    super();
    this.style.height = '123px';
    this.style.display = 'block';
    this.style.width = '100%';
    this.style.clear = 'both';
  }
}
customElements.define('my-custom-div', MyCustomDiv, { extends: 'div' });
const myCustomDiv = document.createElement('div', 'my-custom-div');
document.body.appendChild(myCustomDiv)

Вывод:

<div is="my-custom-div" style="height: 123px; display: block; width: 100%; clear: both;"></div>;

Или, более распространенный способ задания свойств:

 const myCustomDiv = document.createElement('div');
 myCustomDiv.style.height = '123px';
 ... and so on.

Вот хорошая статья о настройке встроенных элементов: https://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Но в статье автор указывает на более современный способ для разработчиков Google: https://developers.google.com/web/fundamentals/web-components/

Надеюсь, это поможет вам.