如何在react中重新渲染组件？
在React中重新渲染组件有几种常见的方法：
- 使用
setState方法：React中的组件状态可以通过setState方法进行更新，当调用setState时，React会重新渲染组件并更新相应的DOM。可以通过修改组件的状态来触发重新渲染，例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.handleClick()}>Increment</button>
</div>
);
}
}- 使用
forceUpdate方法：forceUpdate方法可以强制组件重新渲染，即使组件的状态没有发生变化。但是，官方不推荐频繁使用forceUpdate，因为它会绕过React的优化机制，可能导致性能问题。使用方法如下：
class MyComponent extends React.Component {
handleClick() {
this.forceUpdate();
}
render() {
return (
<div>
<p>Component will be re-rendered</p>
<button onClick={() => this.handleClick()}>Re-render</button>
</div>
);
}
}- 使用
ReactDOM.render方法：如果需要重新渲染整个应用程序或某个组件的子树，可以使用ReactDOM.render方法。该方法会将新的元素渲染到指定的容器中，替换原有的内容。例如：
class MyComponent extends React.Component {
handleClick() {
ReactDOM.render(<NewComponent />, document.getElementById('root'));
}
render() {
return (
<div>
<p>Click the button to re-render</p>
<button onClick={() => this.handleClick()}>Re-render</button>
</div>
);
}
}这些方法可以根据具体的需求选择使用，通过修改组件的状态或重新渲染整个组件来实现在React中重新渲染组件。
相关·内容
19回答
如何使用钩子来强制组件重新呈现？
javascript、reactjs、react-native、react-hooks
考虑下面的钩子例子
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
浏览 0提问于2018-11-08得票数 207
回答已采纳
1回答
如何显示从另一个组件传递的状态
reactjs、ecmascript-6
我基本上是试图显示一个按钮的数字(初始值1)，当你点击那个按钮，数字增加一个。我有两个组件，一个主应用程序组件和一个按钮组件。向Button组件传递一个更新数字的函数。但是当我加载所有这些时，它会给我一个错误：
TypeError: this.state is null
render
src/Button.js:6
export class Button extends React.Component {
render() {
return (
> <button onClick={this.props.onClick}>
{this.state.count
浏览 0提问于2019-05-03得票数 0
回答已采纳
1回答
反应，状态，为什么“数字”没有定义？
reactjs
当我单击“更新”时，此错误将显示。
错误：
app.js?7ac9:18 Uncaught ReferenceError: count is not defined
import React, {Compoment} from 'react';
import ReactDOM from 'react-dom';
class Counter extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.ha
浏览 1提问于2016-12-27得票数 1
回答已采纳
3回答
为什么此子组件不能重新渲染？
javascript、reactjs
我正在尝试使用ReactJS，并试图了解如何触发子组件呈现。在ReactJS中，如果我设置一个这样的示例：
var externalCounterVar = 10
class Counter extends React.Component {
constructor(props){
super(props);
this.state = props;
}
render() {
console.log('rendering counter')
return (
<div> {externalCounterVar}
浏览 0提问于2017-02-22得票数 0
3回答
在主组件中响应访问子组件的属性
reactjs
是否可以访问React中主组件中的子组件属性？
例如，我正在尝试这样做:我有一个主组件MyComponent和一个呈现按钮的SubComp子组件。是否可以将MyComponent的状态设置为单击的SubComp的tex属性
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.b
浏览 2提问于2020-12-22得票数 1
回答已采纳
2回答
我是react.js的新手，跟着教程走就行了。这是我的密码。首先，我尝试使用类组件‘问候’让它在单击按钮后显示不同的单词，但我不知道哪里出了问题，它不会重新修改元素，而构造器()方法只调用一次。注释掉的代码功能组件“问候”运行良好。不知道有什么区别：
class GreetingGuest extends React.Component {
render() {
return (
<h3>hello Guest, Click login button !!! </h3>
);
}
}
class
浏览 1提问于2017-05-07得票数 0
回答已采纳
3回答
使用ES6和ES7的ReactJs中的状态
reactjs
在我看到的许多示例中，为了管理react组件中的状态，您必须使用getInitialState，如本例所示。
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? &#
浏览 2提问于2016-02-26得票数 4
回答已采纳
3回答
React点击计数器:仅更新一个元素的状态
javascript、reactjs、state
这应该很简单，但我想不出该怎么做。
我有一个带有多个按钮的组件，每个按钮都有一个用state设置的"count“值。当用户点击时，计数就会增加。
现在，当我单击其中一个按钮时，两个计数器都会改变。我怎么才能让它只更新被点击的div，使用相同的状态？
编辑:我不想有不同的计数，因为我想让这个组件动态地呈现按钮。如果我一开始不知道有多少个按钮怎么办？
class Block extends React.Component {
state = {
count: 0
};
handleClick = e => {
const count = this.sta
浏览 0提问于2020-02-19得票数 1
2回答
我正在尝试用组件构建一个简单的计算器。
reactjs
我试图建立一个简单的计算器在反应使用组件。我想获取按钮的值并将其赋值为"currentItem"，但是，我仍然得到错误“无法读取属性'setState‘of null”。这是密码。代码位于两个单独的jsx文件中。我真的很感谢你的帮助。
import React from 'react';
import NumbersComponent from './NumbersComponent.jsx';
import EquationComponent from './EquationComponent.jsx';
import
浏览 2提问于2016-10-10得票数 0
回答已采纳
3回答
当道具没有改变时，为什么调用子组件的渲染？
javascript、reactjs
// Child component
class Button extends React.Component {
render() {
console.log("Render of Button called");
return (
<button onClick={this.props.handleClick}>
{this.props.children}
</button>
);
}
}
// Parent component
c
浏览 37提问于2019-06-13得票数 2
回答已采纳
1回答
React -如何将状态传递给另一个组件
reactjs、components、state
我正在尝试弄清楚如何将状态更改通知另一个组件。假设我有3个组件-- App.jsx、Header.jsx和SidebarPush.jsx，我所要做的就是用onClick切换一个类。
因此，当单击Header.jsx文件时，将有两个按钮将状态切换为true或false。另外两个组件App.jsx和Header.jsx需要知道这些状态更改，以便它们可以在这些状态更改时切换类。
App.jsx
import React from 'react';
import Header from 'Header';
import classNames from "clas
浏览 1提问于2016-08-01得票数 58
回答已采纳
2回答
React调用父组件中的函数以访问状态
javascript、reactjs、jsx
我试图构建一个简单的计算器应用程序来开始使用React。我试图从子组件中调用根组件中的函数，以便访问当前状态。我能够调用该函数，但无法访问状态，因为我需要更新状态。下面是我的代码：
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
actions: ['=
浏览 0提问于2018-08-02得票数 0
回答已采纳
3回答
在React 16中实现隐藏/显示
javascript、reactjs
我正在尝试在react 16中实现隐藏/显示按钮，如果我单击一个按钮，它应该显示Card按钮，如果我单击card按钮，它应该隐藏card按钮，我已经实现了这一点，但我使用了componentwillReceiveprops属性，这在react 16中是不推荐的。我尝试了static getDerivedStateFromProps，但当我在handleclick working js fiddle中执行setState时，它被调用。 如何在不使用componentwillReceiveprops的情况下达到相同的效果 下面是我的代码 class Test extends React.Comp
浏览 13提问于2019-04-14得票数 1
2回答
React状态未重新呈现
javascript、reactjs
我有下面的react组件，问题是当检测到onClick事件(触发handleClick函数)时，它不会自动呈现。
如果我编写this.forceUpdate()，那么它工作得很好。这不应该是正常的，它应该在没有它的情况下工作。
import React from 'react';
import Loading from './Loading';
import CameraStore from "../stores/CameraStore";
import * as CameraActions from "../actions/Camer
浏览 0提问于2017-03-01得票数 0
1回答
用重复组件响应组件状态问题
javascript、reactjs
我最近开始学习反应，我有点困惑。
请参阅下面的或代码片段。
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
sessions: [],
sessionSelected: null
}
this.addSession = this.addSession.bind(this);
this.switchSession = this.switchSession.bind(this);
}
addSes
浏览 0提问于2018-02-09得票数 2
回答已采纳
1回答
反应智能和麻木的组件
reactjs、ecmascript-6、babeljs
一直在研究React，并想知道分离智能组件和哑组件的最佳实践。下面的例子是父控件状态，但是我已经在呈现中放置了ui按钮，这些按钮是通过回调进入子节点并实现回父的，还是说这太过了呢？thoughts..here是我的代码
class Child extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div><p>I said {this.props.greeting} {this.props.count} times</p&
浏览 1提问于2017-06-16得票数 1
2回答
反应:处理事件.参数可见性
javascript、reactjs、arrow-functions
我在跟踪反应医生。在'‘部分，下面的代码段就在那里。
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
thi
浏览 4提问于2020-02-01得票数 0
回答已采纳
1回答
使用react.js JSX页面时，onClick按钮事件处理程序不起作用
javascript、node.js、reactjs、react-jsx、react-engine
我正在尝试建立一个web应用程序，我试图在按钮点击时调用一个函数。我使用react-engine作为模板引擎，使用JSX页面。下面是我的layout.jsx页面
import React from 'react';
import Success from "./components/success.jsx";
import ReactDOM from 'react-dom';
class Layout extends React.Component {
constructor(props) {
super(props
浏览 9提问于2016-08-14得票数 0
我尝试在ReactJS中切换组件的状态，但收到以下错误：
已超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
我没有在我的代码中看到无限循环，有谁可以帮助我吗？
ReactJS组件代码：
import React from 'react'
import Buttonevent from './buttonevent.js'
class Button extends React.Componen
浏览 8提问于2020-08-22得票数 0
1回答
反应中的通过变量
reactjs、state
我有他的代码，尝试将一个变量传递给handleclick，并将状态设置为该变量：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'Initial State'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(temp) {
this.setState({
name:tem
浏览 1提问于2018-11-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
