如何在子组件可以访问的上下文中创建方法？

Posted 2023-04-14

【中文标题】如何在子组件可以访问的上下文中创建方法？

【英文标题】：How can create a method in context that can be accessible by child components?

【发布时间】：2020-12-15 18:47:07

【问题描述】：

我有一个渲染组件：

<View>
   <SomeContext.Provider value=state>
        props.children
   </SomeContext.Provider>
</View>

我不明白如何创建可通过以下方式访问的方法：

<View>
   <SomeContext.Provider>
        (method) =>  
                <Button
                   title="Magic"
                   onPress=() => 
                     method()
                   
                 ></Button>
        
   </SomeContext.Provider>
</View>

【问题讨论】：

嘿..您想将方法传递给按钮组件

你有codesandbox我们可以看看吗？

【参考方案1】：

消费者组件

您需要通过Context.Consumer 使用上下文，该Context.Consumer 是相关Provider 的直接后代。这些文档有不错的示例，尽管它们混合了基于类的组件和功能组件。 Updating Context from a Nested Component

沙盒：https://codesandbox.io/s/react-context-consumer-passing-method-to-nested-child-forked-u0bi8

const initData = 
  data:  a: "Text from Context", b: "2" ,
  method: () => 
    console.log("Method called.");
  
;

const SomeContext = React.createContext();

export default function App() 
  return (
    <SomeContext.Provider value=initData>
      <Content />
    </SomeContext.Provider>
  );


function Content() 
  return (
    <div>
      <SomeButton />
    </div>
  );


function SomeButton() 
  return (
    <SomeContext.Consumer>
      ( data, method ) => <button onClick=method>data.a</button>
    </SomeContext.Consumer>
  );

---

useContext 挂钩

useContext 钩子也可用，并且可能提供更熟悉的模式。上下文的 Consumer 仍然需要是 Provider 的后代，但它是通过钩子而不是通过 Consumer 组件访问的。

沙盒：https://codesandbox.io/s/react-context-passing-method-to-nested-child-1fcno

const initData = 
  data:  a: "Text from Context", b: "2" ,
  method: () => 
    console.log("Method called.");
  
;

const SomeContext = React.createContext();

export default function App() 
  return (
    <SomeContext.Provider value=initData>
      <Toolbar />
    </SomeContext.Provider>
  );


function Toolbar(props) 
  return (
    <div>
      <SomeButton />
    </div>
  );


function SomeButton() 
  const  data, method  = React.useContext(SomeContext);
  return <button onClick=method>data.a</button>;

【参考方案2】：

Context counsumer docs 实际上会告诉您您需要知道的一切：

一个订阅上下文变化的 React 组件。这使您可以订阅函数组件中的上下文。

需要一个函数作为一个孩子。 函数接收当前上下文值并返回一个 React 节点。传递给函数的 value 参数将等于树中该上下文的最接近 Provider 的 value prop。如果上述上下文没有提供者，则 value 参数将等于传递给 createContext() 的 defaultValue。

因此，在您的示例中，您需要将所需的方法传递给提供者：

const method = () => ;

<View>
  <SomeContext.Provider value= method >
    props.children
  </SomeContext.Provider>
</View>

然后在消费者中你可以这样称呼它：

<View>
  <SomeContext.Consumer>
    // using destructuring here,
    // so its ( method ) instead of (method)
    ( method ) =>  
      <Button
        title="Magic"
        onPress=() => method() />
    
  </SomeContext.Consumer>
</View>

此外，消费者组件位于提供者内部也很重要。