如何在 reactjs 中重新加载组件（页面的一部分）？

Question

我正在研究反应项目。当我们单击重新加载按钮时，我试图重新加载组件。我实现了如下所示的 onClick 函数。但它正在重新加载整个窗口。我只想重新加载那个类组件，而不是整个窗口。谁能帮我解决这个问题？

refreshPage() {
    window.location.reload();
  }

Answer 1

我发现的最简单的方法是设置种子状态，并在渲染组件的关键属性中使用它。现在只要种子发生变化，组件就会重新加载。

       const [seed, setSeed] = useState(1);
       const reset = () => {
            setSeed(Math.random());
        }
       <Component key={seed}/>
       <Button onClick={reset}>Reset</Button>

现在，每当按下“重新加载”按钮时，我需要的组件都会被重新渲染。

Answer 2

使用反应钩子：

useEffect(()=> {
    fetchData();
}, [data]);
// page will reload whenever data is updated.

Answer 3

您可以通过更新状态触发组件的重新加载。

class YourComponent extends Component {
  state = {
    reload: false
  };

  refreshPage = () => {
    this.setState(
      {reload: true},
      () => this.setState({reload: false})
    )
  }
}

这很脏，但它可能有效。不过，我还没有测试过。

Answer 4

您可以创建一个新函数。您可以在 componentDidMount 和 refreshPage 上调用它。

exampleFunction = () => {
   /** Do your job here */
}

componentDidMount(){
   /** your code */
   this.exampleFunction ();
   /** your code */
}

refreshPage(){
   this.exampleFunction ();
}