如何通过单击父组件上的按钮来刷新我的子组件？

Question

我是这个 stackoverflow 世界的新手。 请在这里帮助我。 如何根据从父组件单击的按钮刷新子组件。 例如，我在父组件中有一个名为 refresh 的按钮，并且没有将任何 state 变量或道具传递给子组件。 但我希望根据父级的按钮单击再次加载子组件。 我尝试添加一个 state 变量，但它没有更新子组件。

父组件：

import React from "react";
import ChildComponentForRefreshTesting from "./ChildComponentForRefreshTesting";

class MyComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = { isRefreshClicked : false };
}
 submit() {
   this.setState({ isRefreshClicked: true }, () => this.setState({isRefreshClicked: false}));
}
render() {
  return (
    <div>
      <h1>Parent Component ------<button onClick={this.submit}>Refresh</button></h1>
      <ChildComponentForRefreshTesting />
    </div>
  )
 }
}

  
  export default MyComponent;

子组件：

import React from 'react'

function ChildComponentForRefreshTesting() {
    return (
        <div>
            child component
            <br />
        </div>
    )
}

export default ChildComponentForRefreshTesting;

Answer 1

更改 state 应该重新渲染当前组件和其中的所有子组件。

我运行了您的代码，但您定义 setState 方法的方式有误。 您需要使用箭头 function，否则this将是未定义的。

因此，如下更改您的提交按钮，它应该可以工作。

submit = () => {
  this.setState({ isRefreshClicked: true });
};

这是堆栈闪电战： https://stackblitz.com/edit/react-f5q3n8?file=src/MyComponent.js

Answer 2

在 class 组件中，您可以调用this.forceUpdate()方法来强制重新渲染。

https://reactjs.org/docs/react-component.html#forceupdate