javascript - 通过 React.js 渲染多个类/对象？

Question

在一个 React 文件中，我有以下内容：

 ReactDOM.render(
   <BlogButton />,
   document.getElementById('nav-blog--react')
 );

 ReactDOM.render(
   <NavButton />,
   document.getElementById('nav-home--react')
  );

  ReactDOM.render(
   <PoweredByButton />,
   document.getElementById('nav-powered--react')
  );

只有第一个渲染有效：“博客按钮”出现了。其他两个“NavButton”和“PoweredbyButton”不显示。我也没有在控制台中收到错误。那是因为你不能在一个文件中有多个渲染吗？我如何将所有这些组合到一个渲染调用中？

Answer 1

尽管我无法向您解释为什么您的示例不起作用-根据我在 react 文档中的了解和阅读，“首选”方法正在创建 1 个包含其他所有内容的 main/wrapper 组件。

您可以将包装器组件视为您向其附加新元素的新 DOM。

我建议您创建一个直接呈现到 DOM 中的包装组件。而其他元素在包装组件中呈现。

WrapperComponent
...
render(
<div>
<FirstComponent />
<SecondComponent />
</div>
);


ReactDOM.render(
   <WrapperComponent />,
   document.getElementById('nav-powered--react')
  );