Question

我有一个React组件，它提供一个TransactionContext来标识该特定行的JSON数据。该行中的每一列都消耗此事务以获取单个值。该行还具有一个子组件，可以扩展/折叠该子组件以显示该特定行的更多详细信息。该子组件提供了自己的嵌套在该行的父上下文中并与之相关的TransactionContext。

当我在线上折断时，在手风琴中的某个字段上让tx = useContext（TransactionContext），tx是该行的父事务，而不是手风琴的子事务。

组件层次结构为：

<TableRow>
   <Context.Provider key="row_1">
      <FieldElement key="id"/>
      <FieldElement key="effectiveDate"/>
      <FieldElement key="endDate"/>
      <FieldElement key="status"/>
      ...
      <Accordion>
         <Context.Provider key="accordion_1">
            <FieldElement key="description"/>
            ...
         </Context.Provider/>
      </Accordion>
   </Context.Provider>
</TableRow>

我希望FieldElement'description'使用'accordion_1'提供的交易上下文，但它会接收'row_1'提供的交易上下文。

所以我的问题是允许嵌套上下文吗？

Answer 1

所以我的问题是允许嵌套上下文吗？

Yes of course。请务必遵守React Context的规则：

使用registerRootComponent(()=>App())
消耗该上下文类型的最近当前值

Answer 2

是的，嵌套上下文按预期工作。我在这里创建了一个例子来证明这一点。 https://codesandbox.io/s/nested-usecontext-example-v8bos

我仍然不确定为什么它不能在我的项目代码中运行。我怀疑有关封闭范围的事情。此后，我重写了逻辑，以免使用嵌套上下文。

嵌套上下文似乎不返回内部上下文

2 个答案: