react outlet使用

React Context（React 上下文）是 React 提供的一项能力，它能够在组件树中传递数据，无需手动一层层地传递数据。React 提供了一个 `React.createContext` 方法来创建一个 Context 对象，该对象包含了两个组件: `Provider` 和 `Consumer`。

React Outlet 是基于 React Context 实现的一种状态管理方案。它提供了一个 `OutletProvider` 组件，负责向子组件传递状态；以及一个 `OutletConsumer` 组件，用于在子组件中获取状态。使用 React Outlet 可以减少 props 层层传递的繁琐过程，可以在 React 组件树的任何位置获取到状态。

使用 React Outlet 需要先安装 `react-outlet` 包。然后在需要使用 OutletProvider 的组件中引入 `OutletProvider` 组件，并将需要共享的状态放在 `value` 属性中。在需要使用状态的组件中引入 `OutletConsumer` 组件，并使用 render props 将状态传递给子组件。例如：

import React from 'react';
import { OutletProvider, OutletConsumer } from 'react-outlet';

function App() {
  return (
    <OutletProvider value={{ count: 0 }}>
      <div>
        <h1>Counter</h1>
        <OutletConsumer>
          {({ count }) => (
            <div>
              <p>Count: {count}</p>
              <button onClick={() => setCount(count + 1)}>Increment</button>
            </div>
          )}
        </OutletConsumer>
      </div>
    </OutletProvider>
  );
}

在上面的例子中，`OutletProvider` 组件将 `{ count: 0 }` 这个对象作为共享状态传递给了其子组件。`OutletConsumer` 组件则通过 render props 获取到共享状态中的 `count` 属性，并将其传递给子组件。这样，子组件就可以获取到父组件中的状态，而不需要通过 props 层层传递。