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

做类似的事情是否很糟糕...

否，您所拥有的代码很好，除了您在,中忘记了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')
);

Answer 2

这是正确的做法，您可以在react文档中看到它：

enter image description here

另一种替代方法是将其集中在一个对象之外。

反应不好的做法来使用ReactDOM.render和注入组件？

2 个答案: