Can Context.Consumer in react be exposed to the outside world? I need to use it

[biubiukam]

In some scenarios, context.Consumer in React needs to be used. Currently, the plug-in is not exposed to the outside world. What is the reason?

When using konva and konva-react, due to the design of konva, the Stage component will have context isolation, and a common solution based on redux is given:

https://github.com/konvajs/react-konva?tab=readme-ov-file#usage-with-react-context

import React, { Component } from 'react';
import Konva from 'konva';
import { render } from 'react-dom';
import { Stage, Layer, Rect } from 'react-konva';

const ThemeContext = React.createContext('red');

const ThemedRect = () => {
  const value = React.useContext(ThemeContext);
  return (
    <Rect x={20} y={50} width={100} height={100} fill={value} shadowBlur={10} />
  );
};

const Canvas = () => {
  return (
    <ThemeContext.Consumer>
      {(value) => (
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <ThemeContext.Provider value={value}>
            <Layer>
              <ThemedRect />
            </Layer>
          </ThemeContext.Provider>
        </Stage>
      )}
    </ThemeContext.Consumer>
  );
};

class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value="blue">
        <Canvas />
      </ThemeContext.Provider>
    );
  }
}

It is not ruled out that there are other plug-ins or frameworks that need to solve the same scenario in this way.

[biubiukam]

The warehouse depends on use-context-selector, which depends on [use-context-selector](https://github.com/dai-shi /use-context-selector) removes the Consumer when processing the Context. Why is this?

https://github.com/dai-shi/use-context-selector/blob/6c37fe2a4c572c7e947b51afa6de482029d2decc/src/index.ts#L135

[dai-shi]

You get it. Yes, it's not supported.

https://github.com/dai-shi/use-context-selector/blob/6c37fe2a4c572c7e947b51afa6de482029d2decc/README.md?plain=1#L228

Hooks don't work with class components anyway, and we don't want to complicate things. We recommend wrapping class components with function components.

the Stage component will have context isolation

Yes, bridging is required for such cases:

https://github.com/dai-shi/use-context-selector/blob/6c37fe2a4c572c7e947b51afa6de482029d2decc/README.md?plain=1#L191

[biubiukam]

你懂了。是的，不支持。

https://github.com/dai-shi/use-context-selector/blob/6c37fe2a4c572c7e947b51afa6de482029d2decc/README.md?plain=1#L228

不管怎样，钩子不能与类组件一起使用，我们不想让事情变得复杂。建议我们用组件函数包装类组件。

具有上下文隔离的阶段组件

是的，这种情况下需要桥接：

https://github.com/dai-shi/use-context-selector/blob/6c37fe2a4c572c7e947b51afa6de482029d2decc/README.md?plain=1#L191

OK, I'll give it a try, thanks for the suggestion