直接渲染<Context>不受支持，将在未来的主要版本中删除。您的意思是渲染 <Context.Consumer> 吗？

Question

我在我的反应应用程序中使用反应传单。 我使用 context api 来构建我的项目。 但是当我尝试使用代码使用传单时：

  <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Marker position={position}>
      <Popup>
        A pretty CSS3 popup. <br /> Easily customizable.
      </Popup>
    </Marker>
  </MapContainer>

我收到如下错误：

1.上下文消费者被渲染为具有多个子项，或者一个不是函数的子项。上下文使用者期望有一个作为函数的子级。如果您确实传递了一个函数，请确保它周围没有尾随或前导空格

2.不支持直接渲染，将在未来的主要版本中删除。您的意思是渲染 吗？

3.render2 不是一个函数

该怎么办？

以下是我的应用程序结构：

<CitiesProvider>
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Homepage />} />
      <Route path="product" element={<Product />} />
      <Route path="pricing" element={<Pricing />} />
      <Route path="login" element={<Login />} />
      <Route path="*" element={<NotFound />} />
      <Route path="app" element={<AppLayout />}>
        <Route index element={<Navigate replace to="cities" />} />
        <Route path="cities" element={<CityList />} />
        <Route path="countries" element={<CountryList />} />
        <Route path="cities/:id" element={<City />} />
        <Route path="form" element={<Form />} />
      </Route>
    </Routes>
  </BrowserRouter>
</CitiesProvider>

Answer 1

确保 CitiesProvider 仅包装单个子节点。目前，它可能尝试渲染多个组件，从而导致错误。使用React.Fragment或者单个组件来包裹，你可以尝试：

<CitiesProvider>
  <>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Homepage />} />
        <Route path="product" element={<Product />} />
        <Route path="pricing" element={<Pricing />} />
        <Route path="login" element={<Login />} />
        <Route path="*" element={<NotFound />} />
        <Route path="app" element={<AppLayout />}>
          <Route index element={<Navigate replace to="cities" />} />
          <Route path="cities" element={<CityList />} />
          <Route path="countries" element={<CountryList />} />
          <Route path="cities/:id" element={<City />} />
          <Route path="form" element={<Form />} />
        </Route>
      </Routes>
    </BrowserRouter>
  </>
</CitiesProvider>