正文 

当前位置： 首页 > 源码 >

React：如何在页面中两次渲染组件？

     2023-02-22     239

关键词：

【中文标题】React：如何在页面中两次渲染组件？【英文标题】：React: How to render a component twice in a page? 【发布时间】：2018-01-26 05:38:50 【问题描述】：

我在 ReactmyComponent.js 中有一个组件构建

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id')
);

在我的 Html 中，我想渲染两次，HTML 如下：

<div id='my-id></div>
some html
<div id='my-id></div>

我想在这个页面中反应渲染两次，但它只为第二个 div 渲染一次。反正有没有渲染两次？

【问题讨论】：

【参考方案1】：

另一种选择是使用class 来定义要渲染的元素：

<div id="my-id-one" class="render-here"></div>
some html
<div id="my-id-two" class="render-here"></div>

然后在js:

let elements = document.getElementsByClassName('render-here');
elements.map(element => ReactDOM.render(
  <MyComponent />,
  element
));

【讨论】：

【参考方案2】：

你可以的

ReactDOM.render(
     <div>
       <MyComponent />
       <MyComponent />
     </div>, document.getElementById('my-id') );

或者你也可以有两个div 不同id的标签

<div id='one'></div>
some html
<div id='two'></div>

然后

ReactDOM.render(
  <MyComponent />,
  document.getElementById('one')
);

ReactDOM.render(
  <MyComponent />,
  document.getElementById('two')
);

【讨论】：

【参考方案3】：

看起来你想在 2 个不同的地方渲染它，中间有非 React 代码。为此，您需要为您的 divs 提供不同的 ID：

<div id='my-id></div>
some html
<div id='my-other-id></div>

然后将组件渲染到每个div：

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-id')
);

ReactDOM.render(
    <MyComponent />,
    document.getElementById('my-other-id')
);

【讨论】：

【参考方案4】：

对于 HTML 中的两个或多个元素，您不能使用相同的 id。使用不同的ids 

<div id='my-id-one></div>
some html
<div id='my-id-two></div>

并为每个 ID 分别调用 ReactDOM.render。

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id-one')
);

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id-two')
);

【讨论】：

React setState 在调用时渲染组件两次

】ReactsetState在调用时渲染组件两次【英文标题】：ReactsetStaterenderscomponenttwicewhencalled【发布时间】：2017-07-2321:56:04【问题描述】：我正在尝试构建一个连接4游戏，它有一个由7个列组件组成的棋盘组件，所有组件都包含6个空间组... 查看详情

在 React 中，为啥子组件的渲染函数会被调用两次？

】在React中，为啥子组件的渲染函数会被调用两次？【英文标题】：InReactwhydoesachildcomponent\'srenderfunctiongetcalledtwice?在React中，为什么子组件的渲染函数会被调用两次？【发布时间】：2020-07-2302:41:54【问题描述】：我有最简单的应... 查看详情

由于严格模式，我的 React 组件渲染了两次

】由于严格模式，我的React组件渲染了两次【英文标题】：MyReactComponentisrenderingtwicebecauseofStrictMode【发布时间】：2020-07-2922:28:25【问题描述】：我的React组件渲染了两次。所以，我决定逐行调试，问题就在这里if(workInProgress.mode&... 查看详情

基本 React 组件渲染两次，没有任何 API 数据

】基本React组件渲染两次，没有任何API数据【英文标题】：BasicReactcomponentrenderingtwicewithoutanyAPIdata【发布时间】：2020-08-2508:43:56【问题描述】：在控制台的本地主机上，我看到我的组件被渲染了两次，但不知道为什么。我没有使... 查看详情

如何在一个 submitHandler 中两次更新反应状态

】如何在一个submitHandler中两次更新反应状态【英文标题】：HowtoupdatereactstatetwiceinonesubmitHandler【发布时间】：2018-10-2218:00:45【问题描述】：我想在React中提交一个表单，我试图用一个submitHandler更新状态两次。第二次更新依赖于第... 查看详情

如何在 React 中强制渲染组件

】如何在React中强制渲染组件【英文标题】：HowtoforcecomponentrenderinReact【发布时间】：2021-03-0514:27:16【问题描述】：我正在对API进行简单的ajax调用，该API每5秒生成一次数据，使用observables正确接收数据，并且数据状态按预期更新... 查看详情

如何从子组件中两次更新父组件中的状态？

】如何从子组件中两次更新父组件中的状态？【英文标题】：HowcanIupdatestatetwiceinaParentcomponentfromaChildcomponent?【发布时间】：2021-08-0321:23:17【问题描述】：我将“isLoadingToggle”传递给我的子组件，如下所示：exportfunctionParent()const[i... 查看详情

为啥我的组件在使用 React 的 Context API 和 useEffect 挂钩时会渲染两次？

...为啥我的组件在使用React的ContextAPI和useEffect挂钩时会渲染两次？【英文标题】：WhydoesmycomponentrendertwicewhenusingReact\'sContextAPIandtheuseEffecthook?为什么我的组件在使用React的ContextAPI和useEffect挂钩时会渲染两次？【发布时间】：2021-01-062... 查看详情

如何在 React 中使用 onClick() 函数渲染不同的组件？

】如何在React中使用onClick()函数渲染不同的组件？【英文标题】：HowcanIrenderdifferentcomponentusingonClick()functioninReact?【发布时间】：2021-12-1920:13:54【问题描述】：我是React和创建井字游戏的新手。我想创建一个包含三个选项的起始页... 查看详情

如何通过使用功能组件更新 React 中的状态来重新渲染页面。？

】如何通过使用功能组件更新React中的状态来重新渲染页面。？【英文标题】：Howtore-renderapagebyupdatingthestateInReactusingfunctionalcomponent.?【发布时间】：2021-11-2204:58:56【问题描述】：我正在处理POST和GET请求。当用户发出POST请求时，... 查看详情

没有传递任何道具时如何不渲染/隐藏 React 组件？

】没有传递任何道具时如何不渲染/隐藏React组件？【英文标题】：HowtoNOTrender/hideaReactcomponentwhennopropispassed?【发布时间】：2022-01-0318:47:59【问题描述】：TLDR：无法弄清楚为什么在没有传递任何props时组件仍在渲染。所以我一直在... 查看详情

如何在 react.js 的父组件中检测子渲染

】如何在react.js的父组件中检测子渲染【英文标题】：Howtodetectchildrendersinaparentcomponentinreact.js【发布时间】：2015-05-1610:54:41【问题描述】：我正在尝试缓存App组件的渲染标记。我知道这在某种程度上“违反规则”，但我处于无服... 查看详情

为啥 useState 会导致组件在每次更新时渲染两次？

】为啥useState会导致组件在每次更新时渲染两次？【英文标题】：WhydoesuseStatecausethecomponenttorendertwiceoneachupdate?为什么useState会导致组件在每次更新时渲染两次？【发布时间】：2020-08-1801:10:14【问题描述】：我这里有一段简单的代... 查看详情

构造函数和渲染方法在反应组件中运行两次

】构造函数和渲染方法在反应组件中运行两次【英文标题】：Constructorandrendermethodsruntwiceinreactcomponent【发布时间】：2020-07-0405:13:04【问题描述】：我创建了一个React项目并为其添加了构造函数和渲染方法，在运行它时，我希望构... 查看详情

React Router 问题：React 在同一页面中渲染两个组件

】ReactRouter问题：React在同一页面中渲染两个组件【英文标题】：ReactRouterIssue:Reactrendertwocomponentsinthesamepage【发布时间】：2020-02-0506:09:58【问题描述】：我的项目有问题，实际上，当用户在我的应用程序的路由之外输入不同的url... 查看详情

React - 防止生命周期组件两次渲染相同的数据：WillReceiveProps & componentDidMount

】React-防止生命周期组件两次渲染相同的数据：WillReceiveProps&componentDidMount【英文标题】：React-preventlifecyclecomponentsfromrenderingthesamedatatwice:WillReceiveProps&componentDidMount【发布时间】：2017-03-0908:54:40【问题描述】：专门针对组件... 查看详情

如何在 React JS 中渲染之前等待状态？

】如何在ReactJS中渲染之前等待状态？【英文标题】：HowtowaitstatebeforerenderinginReactJS?【发布时间】：2020-12-1207:16:42【问题描述】：我使用“ReactContext”将状态user传递给子组件。问题：每次重新加载页面时，状态user的值为空。这会... 查看详情

Vue 渲染一个组件两次

...上执行console.log来解决这个问题()..但是，如果我重新加载页面并在其他时间单击编辑，它们会正确呈现，只有一次。这是相关代码：//listItemsVie 查看详情