javascript - 如何从子组件重新渲染父组件
问题描述
父组件具有 ap 标记,可以为其内部文本设置动画。当我刷新页面时动画工作。
这是父组件:
import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
rerender=()=>{
this.forceUpdate()
}
render() {
return (
<div>
<p className='animate-left'>Animation</p>
<Child rerender={this.rerender}/>
</div>
);
}
}
export default Parent;
这是子组件:
import React, { Component } from 'react';
class Child extends Component {
clickHandler=()=>{
this.props.rerender()
}
render() {
return (
<div>
<button onClick={this.clickHandler}>Click</button>
</div>
);
}
}
export default Child;
我想通过单击子组件的按钮再次动画/重新渲染父组件。怎么做?
解决方案
您必须state
在父组件中拥有并将此状态传递给子组件:
import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
}
rerender = () => {
this.forceUpdate();
};
forceUpdate = () => {
this.setState((state) => ({
counter: state.counter + 1
}));
};
render() {
console.log("got rendered");
return (
<div>
<p className="animate-left" key={this.state.counter}>Animation</p>
<Child rerender={this.rerender} />
</div>
);
}
}
export default Parent;
并在子组件中更新此状态:
import React, { Component } from "react";
class Child extends Component {
clickHandler = () => {
this.props.rerender();
};
render() {
return (
<div>
<button onClick={this.clickHandler}>Click</button>
</div>
);
}
}
export default Child;
推荐阅读
- c# - 如何在.net核心中将多个文件夹用于app.UseStaticFiles?
- java - 如何使用 Apache Beam 从 RabbitMQ 读取数据
- java - Java泛型类作为参数
- scala - scala字符串尾递归与模式匹配
- python-3.x - 如何或是否有必要在 python 中的类中定义属性类型
- java - RegEx 用于匹配变量和逗号之间的空格
- angular - 无法清除Angular 7中相同组件导航上的复选框
- ibm-cloud - 在 IBM Cloud 中使用 LogDNA
- android-room - 观察 LiveData 中对象选中属性的变化
- amazon-web-services - 向 S3 存储桶添加动态前缀