Реакция на плохую практику использования ReactDOM.render и внедрения компонента?

#javascript #reactjs

Вопрос:

Итак, я никогда этого не делаю, но мне, возможно, придется для решения определенной проблемы, с которой я сталкиваюсь со сторонней библиотекой.

В принципе, плохо ли делать что-то вроде

 const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
const id = 'testingId';
newDiv.id = id;
foolEl.appendChild(newDiv);

ReactDOM.render(
    <FooBarComponent />
  document.getElementById(id)
);

Если да, то есть ли какой-либо другой способ, которым я могу подойти к этому? По сути, я пытаюсь вставить компонент в элемент DOM.

1. Какую проблему вы пытаетесь решить?

2. Это совершенно корректный код. Мнения о том, хорошо это или плохо, не относятся к stack overflow

3. @FredStark, я думаю, есть разница между запросом «наилучшей» практики (то есть самоуверенного представления о том, какой метод лучше любого другого метода) и вопросом, является ли подход «плохим» (то есть, есть ли какие-либо известные побочные эффекты, которых можно избежать с помощью другого метода). OP, похоже, спрашивает о последнем. Ответ здесь, как вы сами сказали, нет — в этом коде нет ничего изначально неправильного… но это не делает его самоуверенным.

Ответ №1:

Плохо ли делать что-то вроде…

Нет, код, который у вас есть, в порядке, за исключением того, что вы забыли , в своем ReactDOM.render() . Кроме этого, в этом нет ничего «плохого». Вы могли бы достичь того же результата с меньшим количеством строк, если бы вместо этого сделали:

 const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
foolEl.appendChild(newDiv);

ReactDOM.render(
  <FooBarComponent />,
  newDiv
);

Однако из вашего вопроса неясно, почему вам нужно монтировать приложение React на дочерний div из .foo-class , а не просто монтировать его на foo-class напрямую — вот так:

 ReactDOM.render(
  <FooBarComponent />,
  document.querySelector('.foo-class')
);

1. Я был бы очень рад узнать, почему это было отклонено. Есть ли что-то, что я пропустил или что я могу улучшить? Пожалуйста, дайте мне знать, потому что причина мне неясна.

2. Я никогда не голосовал против, но заметил странность в вашем первом фрагменте. document.getElementById(newDiv) , well newDiv уже является элементом DOM, и делать getElementById с ним не имеет никакого смысла.

3. @Keith, хорошо подмечено. Ошибка поспешного копирования-вставки с моей стороны 🙂 Исправлено. Спасибо!

Ответ №2:

Это правильная практика, вы можете видеть это в документации react:

введите описание изображения здесь

Другой альтернативой является централизация этого в отдельном объекте.