开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在React中的一个ReactDom行中呈现多个js文件(目标容器不是React中的DOM元素)

在React中，可以通过在一个ReactDom行中呈现多个js文件来实现目标容器不是React中的DOM元素的需求。具体步骤如下：

首先，确保你的React项目已经正确配置和安装。你可以使用Create React App来创建一个新的React项目。
在React项目的根目录中，创建一个新的JavaScript文件（例如file1.js）和一个目标容器文件（例如index.html）。
在file1.js中编写你需要呈现的逻辑或组件。
在index.html的目标容器元素中添加一个id，以便在React中找到它。例如，你可以在目标容器元素中添加<div id="target"></div>。
在index.html中引入file1.js。例如，你可以在<head>标签中添加<script src="file1.js"></script>。
在React项目的入口文件（通常是index.js）中，使用ReactDOM.render()方法将目标容器和file1.js中的内容呈现到目标容器中。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 将file1.js中的内容呈现到目标容器中
ReactDOM.render(
  <div>这是file1.js中的内容</div>,
  document.getElementById('target')
);

在上面的代码中，我们首先使用ReactDOM.render()方法将React组件<App />呈现到根目标容器中（通常是React中的DOM元素）。然后，我们再次使用ReactDOM.render()方法将file1.js中的内容呈现到目标容器（即具有id="target"的容器）中。

这样，你就可以在React中的一个ReactDom行中呈现多个js文件，而目标容器不是React中的DOM元素。

参考链接：

React官方文档：https://reactjs.org/
Create React App：https://create-react-app.dev/

相关搜索:react中的目标容器不是DOM元素如何在React中的函数中呈现<img>元素？如何在React中呈现特定数量的元素如何在react中呈现特定元素的弹出窗口？如何在React中呈现由createElement()创建的元素？React JS在单独的行中呈现列表数据 React路由器Dom组件在App.js中呈现，但不是作为单独的组件呈现如何在react jsx中呈现此组件的多个副本为什么React在React DOM树中呈现一个空的文本节点？如何在react中处理容器元素中的加载/微调器在React.js中的多个DOM节点上绑定多个事件如何在多个上传的react js中获得文件输出？如何在React/typescript中访问嵌套DOM元素的文本值如何将json文件中具有内联样式的html元素呈现给react-dom？如何在react路由器dom中传递UseHistory中的多个对象？如何在React JS中启用/禁用数组中的元素？如何在react js中将响应中的html呈现为呈现函数如何在React中父组件的onChange调用中访问内部虚拟DOM元素如何用React.js修改Redux容器中的onClick元素？如何在React js的组件中显示数组元素？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React中文官网已经搬迁了，原网址内容将不再更新

注意1：React中文官网已经搬迁至-https://zh-hans.react.dev，原网址内容将不再更新

01

第一篇：JSX 代码是如何“摇身一变”成为 DOM 的？

时下虽然接入 JSX 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 React。2013 年，当 React 带着 JSX 横空出世时，社区曾对 JSX 有过不少的争议，但如今，越来越多的人面对 JSX 都要说上一句“真香”！本课时我们就来一起认识下这个“真香”的 JSX，聊一聊“JSX 代码是如何‘摇身一变’成为 DOM 的”。

01

学习 React Native for Android：React 基础

本文将从一个简单的例子开始，逐步深入 React 的编写细节。 React Native 主张用 React 的开发思维来编写 UI 层。因此在学习 React-Native 之前，了解基本的 React 的语法和存在的坑会对今后 React Native 的开发大有裨益。本文将从一个简单的例子开始，逐步完善我们的程序。在这个过程中，我们将一步步探讨如何用 React 来开发网页应用，以及需要注意的陷阱。与其他教程不同，本文将采用类似 Zed A. Shaw 的《Learn Code the Hard

02

无需框架，就能实现微前端，理解起来通俗易懂

微前端是一种测试方法，它为独立团队拥有的web应用提供多种功能或模块，使它们更加用户友好和更小的体积。他们基本上把前端应用分成独立的和半独立的微应用，这样每个应用都可以采用不同的技术，比如React、Angular或Vue，这样就可以很容易地集成到单个应用中。

02

前端的对决：React的JSX与Vue的templates

React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大，相对来说很容易获取和使用。

02

简单实现虚拟 dom 和渲染

我们打算实现一下jsx语法的转换过程。但是在此之前要说一下react17之后的一个变化。

05

React两大组件，三大核心属性,事件处理和函数柯里化

3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

01

jsx和React.createElement是什么关系？面试常问

在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？

02

react的jsx和React.createElement是什么关系？面试常问_2023-02-27

在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？

03

react的jsx和React.createElement是什么关系？面试常问5

在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？

03

React教程

简介： React 是一个用于构建用户界面的 JAVASCRIPT 库。 React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

02

react的jsx和React.createElement是什么关系？面试常问

在React17之前，我们写React代码的时候都会去引入React，并且自己的代码中没有用到，这是为什么呢？

03

React框架的介绍

3.1.原生JavaScript操作DOM繁琐、效率低( DOM-API操作UI)。

02

详解「react-dom」 API

从Vue转到React差不多快三个月，这两种框架其实在设计哲学上完全是不一样的道路但是同时又那么相似。

02

【译】开始学习React - 概览和演示教程

当我刚开始学习JavaScript的时候，我就听说了React，但我承认看了它一眼，它吓到我了。我看到了看起来一堆HTML和CSS的混合思想，这不是我们一直努力避免的事情吗？React有什么了不起的？

02

JSX

React是用于构建用户界面的JavaScript库，核心专注于视图，目的实现组件化开发。

05

React基础

React起源于FaceBook的内部项目，用来架设Instagram的网站，并于2013年5月开源。

01

【React】学习笔记（一）——React入门、面向组件编程、函数柯里化

用于构建用户界面的 Javascript 库，它主要专注于界面与视图。采用组件化模式、声明式编码，提高开发效率及组件复用率。在React Native中可以使用React语法进行移动端开发。使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

03

React学习(二)-深入浅出JSX

在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起

03

React中定义组件

PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

05

React基础(2)-深入浅出JSX

在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起

00

一文入门react全家桶

1)遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

02

react笔记

1.英文官网: https://reactjs.org/ 2.中文官网: https://react.docschina.org/

02

React.js基础知识总结一

React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作

03

React虚拟dom的两种创建方式

PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

04

React-day3

理解React中虚拟DOM的概念理解React中三种Diff算法的概念使用JS中createElement的方式创建虚拟DOM 使用ReactDOM.render方法使用JSX语法并理解其本质掌握创建组件的两种方式理解有状态组件和无状态组件的本质区别理解props和state的区别

02

【19】进大厂必须掌握的面试题-50个React面试

这是最有可能由面试官提出的常被问到的50个React面试问答。为了方便您访问，我对React面试问题进行了归类：

03

React入门学习

React 是一个起源于 Facebook 的内部项目，因为当时 Facebook 对于市场上所有的 JavaScript MVC 框架都不太满意，所以索性就自己写了一套，用来架设 Instagram。做出来之后，发现这套东西还蛮好用的，于是就在 2013 年 5 月开源了。

03

React框架基础

00

一篇包含了react所有基本点的文章

去年，我写了一本关于学习React.js的小书，原来是大约100页。今年我要挑战自己，把它归纳为一篇文章。

02

React前端学习

在 JSX 语法中，可以在大括号内放置任何有效的 JavaScript 表达式。例如：2 + 2，user.firstName

04

React前段学习（一）

在 JSX 语法中，可以在大括号内放置任何有效的 JavaScript 表达式。例如：2 + 2，user.firstName

01

React之JSX语法

如果要使用JSX，需要得到语法的支持，你可以使用Babel来进行转换。在该篇文章当中直接引入Babel文件。将上一篇文章的“你好，世界”拿过来看一下：

02

教程：从零开始使用webpack 4, Babel 7创建一个React项目（2018）

看到一篇还不错的文章，翻译（也不是完全翻译，还是改动了一点点让它变得更易理解）了一波，想看原文的移步这里。

02

React基础教程

react是前端三大开发框架之一，是一套UI引擎，是DOM的抽象层，并不是web应用的完整解决方案。它遵循组件设计模式、声明式编程范式和函数式编程的概念，使用虚拟DOM有效的操作DOM，并且遵循从高阶组件到低阶组件的单向数据流，从而使前端应用程序达到高效。

01

快速了解React 16新特性

前一段时间React v16.0发布了，作为react骚年，我们当然要关注版本更新之后，react新增了哪些特性呢？

01

React Advanced Topics

大家都在试用React，之前呢，也给大家分享过一次主题为“浅谈Hooks&&生命周期”的内容，今天呢，作为延伸，来继续给大家介绍一些React的Advanced Topics，也就是一些高级的、不天天用的、但是我们需要会的知识点。

02

1.1、介绍

React 是 Facebook 开发的一款 JavaScript 库，而 React 被建造是因为 Facebook 认为市场上所有的 JavaScript MVC 框架都不能满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得 MVC 很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的 MVC 正在土崩瓦解。2011 年 Facebook 软件工程师 Jordan Walke 创建了 React ，并且首次使用 Facebook 的 Newsfeed 功能。做出来以后，发现这套东西很好用，就在 2013 年 5 月开源了。

04

react组件用法深度分析

React 组件也一样，它的输入是 props，输出是关于 UI 的描述。我们可以在多个 UI 中重用单个组件，组件也可以包含其他组件。React 组件的本质上就是一个普通的 JavaScript 函数。

02

react组件深度解读

React 组件也一样，它的输入是 props，输出是关于 UI 的描述。我们可以在多个 UI 中重用单个组件，组件也可以包含其他组件。React 组件的本质上就是一个普通的 JavaScript 函数。

02

React JSX

它被称为 JSX，一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。

02

必须要会的 50 个React 面试题（上）[每日前端夜话0x40]

如果你是一位有抱负的前端程序员并准备面试，那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。

02

为什么大家都使用 Axios 而不是 Fetch

曾经以为对React了解颇深，但在深入研究后，发现自信心不足。React生态系统不断发展，学习也需持续进行。

00

React 手写笔记

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

02

ReactJS 学习——入门

React 首次被提出是在2014年的 F8 大会上，当期的主题为 “Rethinking Web App Development at Facebook”，这也是 React 名字的由来。

04

React的安装和使用！

React库包含两部分：1、React包含了所有基本功能；2、ReactDOM只包含了操作DOM的功能。

03

React---JSX使用

1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

05

你要的 React 面试知识点，都在这了

React是流行的javascript框架之一，在2019年及以后将会更加流行。React于2013年首次发布，多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。

02

React 入门实例教程

现在最热门的前端框架，毫无疑问是 React 。上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。 React 起源于 Face

07

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭