给我写一个react状态提升案例

好的，以下是一个简单的 React 状态提升案例：

假设我们有两个子组件 `A` 和 `B`，它们都需要使用一个共同的变量 `count`，我们可以将 `count` 定义在它们的父组件 `App` 中，然后通过 props 将 `count` 传递给子组件 `A` 和 `B`。

import React, { useState } from "react";

function A(props) {
  return (
    <div>
      <p>子组件 A 中的 count 值为：{props.count}</p>
    </div>
  );
}

function B(props) {
  return (
    <div>
      <p>子组件 B 中的 count 值为：{props.count}</p>
    </div>
  );
}

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

  return (
    <div>
      <p>父组件中的 count 值为：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加 count</button>
      <A count={count} />
      <B count={count} />
    </div>
  );
}

export default App;

在上面的代码中，我们通过 `useState` 钩子来定义了状态变量 `count`，然后将其传递给了子组件 `A` 和 `B`，这样它们就可以访问到该变量并显示出来。当我们点击父组件中的增加按钮时，`count` 变量的值会更新，并且子组件中的 `count` 值也会相应地更新。

这就是一个简单的 React 状态提升案例，通过这种方式，我们可以将局部变量变成全局变量，并实现在多个组件中共享同一个变量的目的。