强制一个组件在改变时更新

1. 通过使用state强制重新渲染组件：

import React, { useState } from "react";

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You have clicked the button {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

2. 通过props修改

import React from "react";

function MyComponent(props) {
  function handleClick() {
    props.onUpdate();
  }

  return (
    <div>
      <p>{props.text}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

父组件中：

import React, { useState } from "react";
import MyComponent from "./MyComponent";

function App() {
  const [count, setCount] = useState(0);

  function handleUpdate() {
    setCount(count + 1);
  }

  return (
    <div>
      <MyComponent text={`You have clicked the button ${count} times.`} onUpdate={handleUpdate} />
    </div>
  );
}