javascript - React 使用 ReactDOM.render 和注入(inject)组件的不良做法？

Question

所以我从来没有真正这样做过，但我可能不得不为了解决我在第 3 方库中遇到的某个问题而这样做。

基本上，做这样的事情是不是不好

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 元素中。

Answer 1

Is it bad to do something like...

不，你的代码很好，只是你忘记了 ReactDOM.render() 中的 , 。 除此之外，没有什么“不好”的地方。如果您这样做，则可以用更少的行数获得相同的结果:

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

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

但是，从您的问题中并不清楚为什么需要将 React 应用程序安装到 .foo-class 的子 div 上，而不是仅仅将其安装在直接 foo-class - 就像这样:

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