时间戳

首页 > 解决方案 > 括号内的箭头函数 {} 关于反应上下文

reactjs - 括号内的箭头函数 {} 关于反应上下文

问题描述

在 React 上下文的教程中，我看到了这段代码：

<MyContext.Consumer>
  {value => /* render something based on the context value */}
</MyContext.Consumer>

然后我很困惑，value => /* render something based on the context value */这部分就像value => <h1>Hello, {value}</h1>一个函数对吗？为什么我们在这里放一个函数而不是这个函数的结果？喜欢

<MyContext.Consumer>
      {<h1>Hello, {value}</h1>}
 </MyContext.Consumer>

在其他功能组件中，我们执行以下操作：

function Welcome(props) {
  return <h1>Hello, {props.title}</h1>;
}

我们在 {} 中放置了一个类似于函数结果的最终值，对吧？但是为什么我们只是在 Context.Consumer 中放了一个函数而不是函数的结果呢？以及如何以及何时执行此功能？或者为什么我们不这样写：

 <MyContext.Consumer>
     {(value =><h1>Hello, {value}</h1>)()}
 </MyContext.Consumer>

? 太感谢了！

标签： reactjsarrow-functionsreact-context

解决方案

因为<MyContext.Consumer>实际上是一个组件本身，它必须以context某种方式将其传递给您的子组件。这正是你向它传递一个函数的原因：

{value => /* render something based on the context value */}

value这是上下文，函数体使用此上下文返回 a ReactNode（或者换句话说，您想要的表示/组件）。这种技术称为渲染道具。<MyContext.Consumer>将接收您将其作为命名属性传递的函数，children并将在其逻辑中使用最新版本的上下文调用它以呈现您所需的组件。

里面的某个地方MyContext.Consumer：

[this.]props.children(context);

ReactNode如前所述，这实际上将解析为 a 。

在您的情况下，如果您有：

<MyContext.Consumer>
    {<h1>Hello, {value}</h1>}
</MyContext.Consumer>

这是value从哪里来的？

所以，回顾一下：

假设我们有以下消费者，它的上下文值为Harry：

<MyContext.Consumer>
     {context => <h1>Hello, {context}</h1>}
</MyContext.Consumer>

该函数context => <h1>Hello, {context}</h1>将传递给MyContext.Consumer组件。消费者组件将通过将上下文的最新值（在我们的例子中是Harry）传递给它来调用它，然后返回结果。最后，它会像你一样简单return <h1>Hello, Harry</h1>。就这么简单。

该函数实际上可以包含其他组件本身。例如：

<MyContext.Consumer>
     {context => <Component2 contextValue={context} />}
</MyContext.Consumer>

Component2将使用作为属性传递给它的上下文来渲染组件contextValue。

如果您只是将组件视为接收它们所依赖的参数的简单函数（这实际上正是事情的工作方式），那么更容易理解它。组件也是如此Consumer。它的全部目的是接收您的组件（一个函数）并将当前上下文传递给它，以便它可以呈现正确的输出并返回结果。

请注意，此用法仅与功能组件有关，并且在您不使用react hooks的情况下。

推荐阅读