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

Question

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

<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>

？非常感谢！

Answer 1

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

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

value 这里是上下文，函数的主体使用这个上下文来 return a ReactNode（或者换句话说你想要的 representation/component）。这种技术称为 render props。 <MyContext.Consumer> 将接收您作为属性命名的 children 传递给它的函数，并将在其逻辑中使用最新版本的上下文调用它以呈现您想要的组件。

里面的某个地方 MyContext.Consumer:

[this.]props.children(context);

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

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

<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 结果 来调用它。最后，就像你只有 return <h1>Hello, Harry</h1>。就这么简单。

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

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

将使用作为属性 contextValue.

传递给它的上下文呈现 Component2 组件

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

请注意，此用法仅与功能组件相关，并且在您未使用 react hooks.

的情况下

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

arrow function inside parentheses {} about react context

reactjs

arrow-functions

react-context