当前位置: 首页 > 面试题库 >

从树外以编程方式设置反应上下文提供者状态

华旭
2023-03-14
问题内容

我正在将React添加到现有的Webapp中。现在,我将选择性地替换页面的各个部分,以不同的div呈现不同的组件。因此,我没有一棵树挂起所有组件。我想使用一个上下文提供程序在所有这些组件之间共享上下文信息,但是由于我没有一棵树,所以无法使它们全部挂在同一个上下文提供程序上。

有没有办法使用这样定义的默认上下文?

const MyContext = React.createContext(some_data);

并没有提供者挂起哪个组件,而没有消费者?

<MyContext.Consumer>...</MyContext.Consumer>

它适用于默认值,但后来我不知道如何更改此默认上下文的值。

我的理解是正确的,这是针对所有与提供者混在一起的消费者吗?还是有办法以编程方式设置默认上下文的值?还有另一种方法可以解决这个问题吗?


问题答案:

React上下文完全依赖于组件层次结构,不能用于为不相关的React小部件提供公共上下文。

如果页面包含多个React小部件,则它们需要有一个公共父级。这可以通过门户网站来完成,这样就不需要将整个页面转换为React组件。

这是一个例子:

<div id="App"></div>
<h2>Foo widget</h2>
<div id="FooWidget"></div>
<h2>Bar widget</h2>
<div id="BarWidget"></div>
class App extends Component {
  render() {
    return <FoobarContext.Provider value={{foo: 'foo', bar: 'bar'}}>    
      {ReactDOM.createPortal(<FooWidget />, document.getElementById('FooWidget'))} 
      {ReactDOM.createPortal(<BarWidget />, document.getElementById('BarWidget'))} 
    </FoobarContext.Provider>;
  }
}

const FooWidget = props => <FoobarContext.Consumer>
  {({ foo }) => foo}
</FoobarContext.Consumer>;

...

ReactDOM.render(<App />, document.getElementById('App'));


 类似资料:
  • 我正在编辑以使问题更简单,希望这有助于获得准确的答案。 假设我有以下形状: 如何从一个活动类中以编程方式设置颜色?

  • 我习惯于用JavaFx编写如下所示的代码,因为这就是我几年前学习的方式。 我最近安装了JetBrains IntelliJ IDEA Ultimate Edition 2018.1.6,我发现要打开primaryStage窗口,我需要一个fxml文件。 我必须这么做, 如果我运行第一个代码片段,什么都不会显示。但是如果我用FXMLLoader.load(getClass(). getResourc

  • 如何在Spring Boot应用程序中设置活动配置文件。该应用程序将部署在独立的Tomcat中。 我有2个属性文件应用程序-{profile}。属性。

  • 问题内容: 我目前正在从事一个项目,该项目要求我以编程方式将.class文件反编译为Java文件。IE我有一个程序,应该读取一个类文件并对其进行反编译,并将生成的Java源代码写入文件中。请帮我做。 编辑:我是反编译器世界的全新手。我已经看过一些API,但是我不知道到底该如何使用以及使用哪个API。任何形式的帮助将是非常可观的 编辑: 我尝试使用: 但是上面的代码只是在指定的目录中创建了一个名为“

  • 问题内容: 我正在尝试在应用程序启动期间进行设置,但似乎为时已晚,非无头模式已经启动: 除此之外,还有另一种方法让无头为真吗?我不希望在控制台上进行任何配置。 问题答案: 我正在使用一个类,该类在常量(和其他静态代码)中静态加载JFreeChart的不同部分。 将静态加载块移到类的顶部解决了我的问题。 这不起作用: 通过将Java移动到类的顶部,让Java尽早执行该静态块! 当考虑它时,这是完全有

  • 关于这一高级话题,请先阅读提供者状态一节的介绍。 当按照以下形式来阅读时,提供者状态中的文本应该具有足够的可读性(自动生成的文档是按这样的形式展示的): Given an alligator with the name Mary exists * Upon receiving a request to retrieve an alligator by name ** from Some Consu