如何在web组件中更改属性后重新渲染？(Javascript Vanilla)
在Web组件中更改属性后重新渲染可以通过以下步骤实现：
- 获取要更改的Web组件元素：可以使用
document.getElementById()、document.querySelector()等方法获取到要更改的Web组件元素。 - 更改属性值：使用JavaScript代码来更改Web组件的属性值。例如，如果要更改一个
<div>元素的文本内容，可以使用element.textContent属性来更改。 - 重新渲染Web组件：重新渲染Web组件可以通过多种方式实现，以下是其中两种常见的方法：
- a. 使用
element.innerHTML属性：将Web组件的innerHTML属性设置为新的HTML内容，这将导致浏览器重新渲染该组件。例如，如果要更改一个<div>元素的文本内容，可以使用element.innerHTML = '新的文本内容'来重新渲染。 - b. 使用
element.setAttribute()方法：通过更改Web组件的属性值来触发重新渲染。例如，如果要更改一个<img>元素的src属性，可以使用element.setAttribute('src', '新的图片路径')来重新渲染。
需要注意的是，重新渲染Web组件可能会导致性能问题，特别是在频繁更改属性值时。为了提高性能，可以考虑使用虚拟DOM库（如React、Vue等）来管理组件的重新渲染。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供高性能、可扩展的云数据库服务，适用于Web应用程序的数据存储。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全、可靠、低成本的云存储服务，适用于存储和管理Web组件中的多媒体文件。详情请参考：https://cloud.tencent.com/product/cos
相关·内容
哪个Javascript框架/库最适合创建模式库来支持所有未来的框架/库？
在我们需要为应用程序的开发支持所有新的即将到来的框架的情况下，哪个框架/库最适合为模式库创建可重用的组件/模式，这些组件/模式可以作为单个源在不同的应用程序中使用。
Angular/Ember/React/Vanila javascript/Web组件？
浏览 1提问于2017-08-07得票数 0
我正在用React框架创建spfx webpart。我有一个渲染方法，所有的控件都被渲染了。我有一个按钮，在DOM中的几个复选框将发送数据到SharePoint使用post方法this.context.spHttpClient.post当用户点击按钮时。我可以将数据提交给SharePoint。但是，一旦我提交了数据，我就不能重新加载spfx But部件。我必须在不重新加载页面的情况下重新加载web部件。我已尝试再次调用render方法。当然，它可能不是正确的方式，所以它不起作用。
浏览 0提问于2017-11-30得票数 1
我有用户选择的选项，这些选项保存在父组件的状态中。父组件是带有"form“的整个网页。
当用户按下"Submit“时，我希望使用这些选项的子组件使用传递给它的这些新属性重新渲染。当您加载页面时，默认生成可见。
但是，我不希望它在“提交”被按下之前完成，只有在按下之后才能完成。
我所能想到的就是从节点中删除元素并重新生成它，但这不是使用React的好方法。如果需要更多的澄清/上下文，请让我知道。我是一个新的反应，我正在做这个项目，以熟悉它和它的行为。
谢谢!
浏览 0提问于2020-10-26得票数 0
我目前正在开发一个基于react redux的web应用程序，它在UI上显示大量数据。当数据大小增加时，每秒的帧数减少。此外，某些表单显示组件的时间较长，并且显示速度较慢。如果有人可以指导我正确的渲染方法或一些编码标准需要遵循这样的应用程序，这将是一个很大的帮助。-Thanks
我目前正在检查我的应用程序是否使用了react生命周期组件(由任何其他开发人员显式使用)。我还怀疑组件的呈现方式。
浏览 1提问于2019-01-26得票数 2
我从"ComponentDidMount“函数中提取数据，并将它们加载到我的状态中。在我进行控制台操作之后，立即记录值并查看所有内容。然而，当我试图以同样的方式在我的渲染函数的返回中访问状态时，我将得到"undefined“。 public componentDidMount() {
sp.web.lists.getByTitle("alert").items.get().then((item) => {
this.setState({items: item})
console.log(this.state.items[0].Title) //w
浏览 14提问于2020-06-23得票数 1
回答已采纳
我对javascript还是个新手，目前我正在开发一个web客户端，用来显示数据库中的一些数据。我想应该是相当标准的东西。我使用react.js并安装了react-widgets来获得一些不错的小部件。我使用的comboxbox是从mongo数据库中获取数据，这取决于从另一个comboxbox中选择的集合。因此，通过更改集合，会更新其中的数据以反映更改。这工作得很好，但我似乎无法设置默认值。下面是呈现comboxbox的代码：
<Combobox onChange= {this.handleOnChange} data = {this.state.myValues} defaultVal
浏览 1提问于2015-03-03得票数 2
我对javascript框架是如何工作的有一点好奇。Web开发并不是我的专业领域(我更喜欢c/c++ )，但是javascript框架会被翻译成普通的javascript吗？
通过对网站源代码的检查，它看起来大部分都是标准的javascript。这些javascript引擎只是在服务器端将代码翻译成javascript吗？
浏览 0提问于2019-09-22得票数 2
这个问题严重影响了我的表现。每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。
import React from "react";
const Content = ({children}) => {
console.log("I am rendering multiple times on each update");
return children;
};
export default function App() {
const [open, setOpe
浏览 3提问于2020-06-12得票数 1
我们有一个使用Material-ui的React编写的web组件。此used组件将在angular应用程序中使用。 最初，我们有一个问题，即材质样式不能应用于卷影dom中的元素。因此，我们遵循这里给出的解决方案:使用How to mount styles inside shadow root using cssinjs/jss使用StylesProvider，并将jss的insertionPoint设置为影子dom中的一个元素。 这个解决方案在我们第一次调用web组件时就起作用了。但是在angular托管应用程序中，我们有代码来有条件地呈现这个we组件。当我们第一次渲染时，这个webcomp
浏览 15提问于2020-07-14得票数 1
回答已采纳
我试图在我的reactjs应用程序中集成一个特定的java applet。更重要的是，我想让它在一个对话框中运行(使用matelial )。
我有一个渲染功能，它可以工作，当我点击一个特定的按钮时，就会显示对话框。有关“我的返回()”函数的Dialog中的applet部分的代码如下所示：
<Dialog
ref="dialogAction"
title={this.state.dialogTitle}
actions={customAction}
actionFocus="submit"
moda
浏览 2提问于2016-04-04得票数 1
回答已采纳
当我使用react-router转到一个功能组件时，它渲染了两次。但是，当我刷新该组件的页面时，它只呈现一次。
对于测试，创建了空的功能组件，如下所示：
import React from 'react'
const TestFunctional: React.FC<any> = () => {
console.log('Test===>>>') // console log twice when navigate to this component
return <></>
}
expor
浏览 1提问于2021-08-06得票数 1
当可观察到的更新时，Mobx @observer组件是否会在该组件上触发render或forceUpdate？当它发生时，会触发哪些生命周期方法？render和forceUpdate有什么区别吗？
即使在render方法中，子对象如何保持不变？React或Mobx是否负责检测何时将道具传递给子对象并需要重新渲染？
谢谢!
浏览 2提问于2017-03-27得票数 3
1回答
我按照指南创建了一个带有纯JS/HTML/CSS的本地自定义元素作为web组件。
现在，我想知道如何为这样一个组件编写单元测试。有一个优秀的图书馆web组件测试器，但我相信它只适用于用聚合物创建的组件。
由于我的组件不是聚合物web组件，而是本地组件，请有人为单元测试指出正确的方向。
浏览 3提问于2018-09-04得票数 4
回答已采纳
这是我的情况： shortArray.map(data => (
<div className={this.state.active === data.id ? "show" : "dontShow"}>
{this.processAVeryLongArray()}
</div>
)) 我希望你能明白这一点。只是状态发生了变化，并且processAVeryLongArray是独立于它的。我唯一需要状态的就是改变元素的类名，但是子元素没有改变。顺便说一句，它会重新渲染所有的孩子。如何解决这个问题？
浏览 19提问于2019-01-17得票数 1
如果我有一个像这样的input元素：
<input list='foo'>
<datalist id = 'foo'>some options</datalist>
有没有可能使用javascript事件来延迟渲染列表，直到输入了x个字符，以及其他类似的微调？
我似乎无法阻止这个列表弹出。我已经找到了关于本机行为的文档，但不幸的是，我一直无法找到关于这个特定问题的任何东西。
浏览 32提问于2018-07-07得票数 0
回答已采纳
好的，那么： useEffect(() => {
}, [props.lang]); 每次使用props.lang更改时，我应该在useEffect中做些什么来重新渲染组件？
浏览 23提问于2019-09-20得票数 17
回答已采纳
目前我的组件渲染了4次。看起来它正在为每个道具渲染。如果我删除了除网络之外的道具，那么它只渲染一次，但是我确实需要其他道具。我在componentDidUpdate中使用了if语句，因为我需要检测更改，但是我渲染了4次，并且我的网络属性是相同的 export class Camera extends Component {
componentDidUpdate(prevProps, prevState){
if (prevProps.network !== this.props.network){
this.connect(this.props.network)
浏览 135提问于2021-11-08得票数 3
回答已采纳
1回答
我正在使用ember.js(version 3.7)，我现在有点困惑。现在，我正在为我们的应用程序优化代码部分。首先，我将尝试在组件中找到哪些内容是重新呈现的？进入这个话题后，我被它弄糊涂了。
在ember中，他们使用方法触发重呈现事物(jQuery DOM操作、Asnyc函数加载等)。现在，我没有太多的想法，重新渲染在烬。有人能给我解释一下细节吗？并且，如果你有任何关于在成员中重新渲染的资源，请分享。
提前谢谢。
浏览 0提问于2019-05-15得票数 1
回答已采纳
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 0
回答已采纳
1回答
我想使用修改我的Vue组件模板中的div。我在我的一个方法中有这样的代码：
let tooltip = document.createElement('button');
tooltip.setAttribute('type', 'button');
tooltip.setAttribute('v-tooltip.top-center', '"msg"');
tooltipSpan.innerHTML = 'x';
// Insert span with tooltip after
浏览 0提问于2019-08-14得票数 1
4回答
rails 4& rails 5应用程序中的嵌套表单一直在使用cocoon gem。目前，我正在将rails 5.2应用程序中的一个更新到rails 6 (该应用程序使用cocoon )。
由于rails 6使用的是webpacker，所以我厌倦了在application.js文件中要求cocoon，就像我们以前版本的rails一样。
app/javascript/application.js
//= require cocoon
但不幸的是，事情似乎不起作用。也尝试导入，但当然，它也不能工作，因为茧是不可用的javascript包。
有什么解决办法或替代办法吗？
浏览 0提问于2019-09-17得票数 15
回答已采纳
2回答
我在React上有一个简单的组件--app。当我回答一个问题时-我的组件重新呈现新的问题，并且我想要有一个问题块的动画。但是，我只有这个组件第一次渲染时的一次性动画。如何在组件的每一次重新渲染上制作动画？
下面是我的沙箱示例--
下面是我的代码：
import { useState } from "react";
import "./styles.css";
const questions = ["1", "2", "3", "4", "5"];
const answers =
浏览 23提问于2021-02-23得票数 0
回答已采纳
我想知道是否可以使用react图标和选择选项元素。我搜索了很多关于这个问题的内容，但是所有的解决方案都与react select库有关，而不是简单的选择选项元素。
以下是我正在做的事情
import {ReactIcon} from "react-icons";
.............
some code here
.............
<select>
<option> sometext <ReactIcon /> </option>
<option> sometext <Reac
浏览 2提问于2021-11-24得票数 1
4回答
我正在使用Expo + React导航。
在我的React Native应用程序中有很多使用组件Map的屏幕。我不希望这个组件在切换屏幕时被重新渲染。有没有办法将我的组件Map保存到某种类型的存储中，这样每次我需要Map时，我的应用程序就不必重新渲染它？
浏览 2提问于2018-04-02得票数 5
我有一个简单的问题。如果我有一个组件，只要有一个叫做count=1的变量就会被渲染，我该如何使其动态化，使得被渲染的组件的数量始终相等呢？我可以做if，否则if会很单调乏味。我在想一些更像for循环的东西？下面是一些我想渲染n次的代码。它只是一个简单的组件，如下所示。
return(
<div>
<SensorComponent user={props.user}
moisture={value}
historic
浏览 2提问于2021-01-23得票数 0
我目前有一个下拉select来过滤'Apply‘之后的一些图表。它工作得很好(见下面的截图)。
问题是，当选择了另一个timespan时，React会在我单击“Apply”按钮之前重新呈现所有图表。
我想通过实现shouldComponentUpdate来避免这种不必要的重新渲染，但是我不知道该怎么做。
下面是我尝试过的，但它不起作用(仍然是一个重新渲染)：
shouldComponentUpdate(nextState) {
if (this.state.timespanState !== nextState.timespanState) {
浏览 3提问于2021-10-12得票数 0
我有一个reactjs组件：
var com1 = React.createClass({
render: function() {
return (
<a href='#'>This is a text</a>
);
}
});
我想在完成这个组件网的渲染后执行Javascript/Jquery。简单地将Javascript添加到render方法似乎不起作用。
我将如何实现这一点？
浏览 0提问于2015-03-20得票数 19
回答已采纳
1回答
不同框架中的Web组件
、、、、
我想要创建自定义Web组件，并使用它们在各种框架中，如角，反应和香草Javascript。
我的问题是，我应该使用聚合物(或任何其他库)创建一个或写下来通过扩展"HTMLElement“。
有什么区别。
浏览 0提问于2018-11-01得票数 1
回答已采纳
我正在尝试使用vue onClick将地图更新到我的当前位置，它会更新道具并将它们发送到我的地图组件。当我的地图数据发生变化时，我使用a :key重新呈现我的地图组件，并且我的地图中心获得了一些新的x，y。(基于esri/arcgis示例，我需要重新构建地图，如果有人知道这是错误的，请告诉我) VUE js arcgis启动文档：https://developers.arcgis.com/javascript/latest/guide/vue/ 由于某些原因，我的地图再次渲染，看起来它即将加载，但随后它仍然是空白的。也许有人可以告诉我，这是不是组件在我强制它再次渲染后仍然以某种方式持续存在的
浏览 56提问于2020-04-19得票数 1
回答已采纳
2回答
我很好奇是否有办法做到这一点：
#sidemenu {
.unlocked {
color: blue;
}
.locked {
color: red;
}
}
而不是像这样写出来：
#sidemenu .unlocked {
color: blue;
}
#sidemenu .locked {
color: red;
}
浏览 0提问于2016-04-10得票数 0
5回答
我是Reactjs的新手。我不确定如何在Reactjs中添加delay来渲染.What是增加延迟的最好方法。
我在render中添加了以下代码，但它不起作用。
setTimeout(function() {
}, 1000);
浏览 3提问于2017-02-07得票数 38
所以我有一个使用Next.js的SSR应用程序。我使用的是一个使用WEB API的第三方组件，所以它需要加载到客户端而不是服务器上。我正在使用'two-pass‘渲染，我在这里读到了：
我试图弄清楚为什么当next.js页面状态中的'ssrDone‘状态改变时，整个<Layout>组件不必要地重新呈现，包括页面的页眉、页脚等。
我读过关于React.memo()以及利用shouldComponentUpdate()的文章，但我似乎无法阻止它重新呈现<Layout>组件。
我的<Layout> console.log消息触发两次，但<Th
浏览 154提问于2019-11-22得票数 4
回答已采纳
2回答
我是使用stenciljs的webcomponents的新手，我正在测试创建一个select，这个想法是用下面的代码创建和呈现select：
<rhx-select label-text="A select web component">
<rhx-select-item value="1" text="option 1"/>
<rhx-select-item value="2" text="option 2"/>
</rhx-select>
浏览 3提问于2021-01-09得票数 0
我想知道如果connect()ed的父组件在shouldComponentUpdate中返回false，它是否会重新呈现
比如说，我们有一个组件树，看起来像这样
connect(Foo extends PureComponent)
DumbBar
connect(Baz extends PureComponent)
因此，无论是Baz还是Foo，如果它们自己的道具(由mapStateToProps提供给它们)保持不变，那么它们都不应该重新渲染。但是，如果redux存储的状态发生更改，并且connect()ed Baz组件收到状态更改的通知并获得新的属性，会发生什么情况呢
浏览 2提问于2017-11-08得票数 1
1回答
我是一个反应新手，我试图找出如何提高渲染性能。
考虑到示例，每当我创建一个新的Todo时，所有待办事项都将被重新呈现：
如何优化以只呈现新项？
浏览 2提问于2017-05-07得票数 2
回答已采纳
1回答
我正在开发一个主要基于angular的大型SPA应用程序(MVC4)。我正在做一些指令，我想使用react来做一些渲染(观察指令的数据或事件触发，我甚至为我的同事做了一个演示)。JSX不是一个选项，我看到一些人使用react工厂来代替，但只使用browsify，这也不是一个选项。我应该如何构建react的文件夹架构？是否划分为工厂和类？
浏览 3提问于2014-12-16得票数 0
我想为一些组件启用布局动画，但是一旦它被激活，所有渲染的组件都会受到布局动画的影响。例如，我有
<container>
<waterfall/>
<menu/>
</container>
我只希望对组件菜单使用布局动画，但是动画应用于瀑布渲染，它已经有了自己的动画代码。
使用原生react可以做到这一点吗？
浏览 0提问于2016-10-24得票数 7
我想操作DOM，它是在ember中的路由更改之后生成/附加的。所以我需要在页面渲染成功之后调用钩子方法(对于所有的部分)，它并不是特定于组件的。只想得到通知，每次新的部分成功加载后，路由改变？
有人能帮我吗？
浏览 6提问于2016-10-24得票数 0
回答已采纳
1回答
如何在渲染中使用JavaScript变量而不是节点名，以便在jsx中使用？如下所示：
var First = React.createClass({
render: function() {
var nodeName = this.props.node; // this.props.node = 'Second';
return <{nodeName}/>;
}
});
var Second = React.creactClass({/*...*/});
浏览 2提问于2015-10-22得票数 3
2回答
我在我的项目中使用react原生地图。我想根据搜索绘制多边形，而不需要再次加载整个地图。重新渲染整个贴图，而不是绘制多边形本身。
我有这样的逻辑。
_getMapData将根据搜索结果渲染下面的地图和多边形。它将在每次筛选器更改或componentWillMount时调用。
<MapView initialRegion={region} zoomEnrabled>
{mapData.map((data, index) => (
<MapView.Polygon
key={i
浏览 5提问于2019-04-16得票数 1
我有一个reactjs rendermethod，我试图通过一个函数设置一个变量，它看起来像这样(你猜对了，不起作用)：
render() {
let myVariable=''
//this function changes/sets myVariable
this.changeMyVariable()
return (
<div>{myVariable}</div>
);
}
如何通过另一个函数设置在渲染中使用的变量，类似于上面的示例。我还尝试
浏览 1提问于2016-11-23得票数 7
回答已采纳
我们有一个选项卡框，其选项卡面板使用include来包含内容：
<tabpanels height="100%">
<tabpanel>
<include src="@load(vm.myTabUrl)" />
</tabpanel>
...
</tabpanels>
在生产环境中，偶尔不会显示include的内容。这种行为似乎是随机的，我们不知道如何复制它。
当发生这种情况时，生成的html包含一个inclu
浏览 0提问于2017-08-23得票数 1
1回答
是否可以将道具的值保存在组件的数据中，以便下一次渲染？我的意思是，我希望从Vue更新数据组件，并在新实例中获取之前实例的属性的值
浏览 9提问于2019-03-20得票数 0
1回答
我希望渲染一个基于字符串的组件。从本质上讲，我希望找到与JavaScript的动态函数名能力(parent["childMethod"])等效的JSX。
那么，如果我有一个字符串，比如"<MyComponent />"，我怎么才能转换成JSX并进行渲染呢？
浏览 0提问于2015-03-04得票数 5
回答已采纳
我试图在react的表格中制作粘性标题，为了做到这一点，复制了表格标题，并使容器相对于表格div的绝对位置。但问题是表单元格的宽度并不相同。我想要获取表中每一列的宽度，并设置粘性标题列的宽度，使它们相同。渲染后如何操作？
代码结构如下：
<div className="tableDataContainer">
<div className="stickyHeader">
<Table>
<TableHead></TableHead>
<
浏览 76提问于2021-05-14得票数 2
当用户发表评论时，我正在尝试触发重新渲染。所以我使用了setState。似乎不会重新渲染。我想在每次处理提交时重新渲染。
我只是对它进行了编辑，所以它不是一个承诺；这是我的错误。但是它似乎不能重新渲染。
这是this.state.comments所在的容器。它只是预先写好的。这样我就不用在构造函数中做了。
import React from 'react';
class CreateForm extends React.Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2020-01-18得票数 0
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
我有一个可以在网格中显示项目列表的应用程序。其中一些项目有一个嵌入的视频，当它被重新渲染时，它会闪烁或停止播放(如果它已经在播放)。
该列表在Redux中维护。当用户滚动到页面底部时，它会加载更多的结果，这会导致Redux状态更新，而这又会导致网格重新呈现所有项目以及新项目。
我正在寻找一个解决方案，将只添加更多的项目到网格的末尾，而不是重新渲染一切。
我有一个组件可以支撑整个网格。它为网格中的每个项目呈现一个组件。在每个项目中，我都有一个包含嵌入式视频的组件。
有什么想法吗？
浏览 17提问于2019-07-10得票数 0
我有一个<select>元素，在该元素中，我要从Rails数据模型中提取选项。这是可以的，但是会产生一个沼泽标准的HTML选择下拉列表.
然而，我想使用react select组件，而这正是我正在挣扎的地方。我可以渲染反应-选择下拉，但选项是空白的。我在控制台中没有任何错误，我可以在React Tools中看到数组中的51项。
这是生成基本HTML下拉列表的代码。
import React from 'react';
import axios from 'axios';
import Select from 'react-select'
浏览 0提问于2019-01-07得票数 0
回答已采纳
如何在Angular 2中强制组件重新渲染？为了调试的目的，使用Redux时，我想强制一个组件重新渲染它的视图，这是可能的吗？
浏览 125提问于2016-01-31得票数 204
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
