如何从子组件重新渲染父组件

Question

父组件有一个 p 标记，可以为其内部文本设置动画。刷新页面时动画效果。

这里是父组件：

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;

我想通过单击子组件的按钮再次动画/重新渲染父组件。 该怎么做？

Answer 1

您必须在父组件中有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;