React Context 如何通過使用組件內部的函數來工作

Question

這段代碼是如何工作的？ 如何在組件內部調用函數？

import React from 'react'

const ThemeContext = React.createContext('blue');

const App = () =>
    <ThemeContext.Provider value={'green'}>
        <ThemeContext.Consumer>
            {(value) => <button style={{ background: value }}>Hello Context!</button>}
        </ThemeContext.Consumer>
    </ThemeContext.Provider>

export default App

我正在嘗試了解 React Context 內部結構，雖然很清楚如何使用 Context/Provider/Consumer 我只是似乎不明白這條線實際上是如何調用組件內部的函數的

<ThemeContext.Consumer>
    {(value) => <button style={{ background: value }}>Hello Context!</button>}
</ThemeContext.Consumer>

是否可以在自定義組件中使用相同的模式？ 這會引發警告“函數作為 React 子項無效。

<div>
{(value)=><span>{value}</span>}
</div>

Answer 1

React 函數作為子組件

因此，如果我做對了，您基本上是在問如何獲得以下格式的組件：

<MyComponent>
  {(name) => (
    <div>{name}</div>
  )}
</MyComponent>

這些被稱為子函數。 您可以通過在本地管理組件中的狀態或變量來實現，然后通過將子項實現為MyComponent的函數，將該狀態或變量傳遞給應用程序中的任何其他組件。

因此，您的MyComponent組件將如下所示：

class MyComponent extends React.Component { 
  render() {
    return (
      <div>
        {this.props.children('Scuba Steve')}
      </div>
    );
  }
}
MyComponent.propTypes = {
  children: React.PropTypes.func.isRequired,
};

這允許您在任何具有完全相同的狀態或變量的地方重用MyComponent ，但您可以以不同的方式呈現它。

您會在諸如react-final-form類的庫中發現這種模式很多，其中庫維護一個狀態，用戶可以“使用”該狀態並以他們想要的任何方式呈現它。

您可以在此鏈接和此鏈接中閱讀更多相關信息。

Answer 2

了解 React Context 內部結構

React Context Consumer children 是一個函數，而不是典型的字符串或 React 元素

<ThemeContext.Consumer>
  {(value) => <button style={{ background: value }}>Hello Context!</button>}
</ThemeContext.Consumer>

<div>
  Hey, I'm normal JSX
</div>

上面的代碼將被轉譯為

React.createElement(ThemeContext.Consumer, null, function (value) {
    return React.createElement("button", {
      style: {
        background: value
      }
    }, "Hello Context!");
  })

React.createElement("div", null, "Hey, I'm normal JSX"))

您可以看到子項（ props.children ）是一個函數。

Answer 3

<div>
   {(value)=><span>{value}</span>}
</div>

這段代碼意味着您在<div>聲明了一個函數。 （不再調用該函數）

<ThemeContext.Consumer>
    {(value) => <button style={{ background: value }}>Hello Context!</button>}
</ThemeContext.Consumer>

此函數將在ThemeContext.Consumer內ThemeContext.Consumer然后您的元素將呈現

Answer 4

我認為它更像是一個 javascript 問題，而不是一個特定的反應； 反應組件最終會變成一個函數； javascript 支持函數作為第一類，因此函數可以作為參數傳遞給其他函數（或作為值返回），因此組件和上下文 API 越高。 所以你的問題可以大致翻譯成這個代碼片段：

 function Theme (color) { /* some code maybe */ return function Nav (TotalItems){ return `I'll render a ${color} with ${TotalItems} TotalItems`; } } let redThemed = Theme( "dark red"); let navComp = redThemed(17); console.log( navComp ); console.log( redThemed(12) ); let blueThemed = Theme( "light blue"); console.log( blueThemed(4) );