带有 React Hook 的 HoC [英] HoC with React Hooks

问题描述

我正在尝试使用 Context API 从 class component 移植到 react hooks，但我不知道什么是得到错误的具体原因.

I'm trying to port from class component to react hooks with Context API, and I can't figure out what is the specific reason of getting the error.

// contexts/sample.jsx
import React, { createContext, useState, useContext } from 'react'
const SampleCtx = createContext()

const SampleProvider = (props) => {
  const [ value, setValue ] = useState('Default Value')
  const sampleContext = { value, setValue }
  return (
    <SampleCtx.Provider value={sampleContext}>
      {props.children}
    </SampleCtx.Provider>
  )
}

const useSample = (WrappedComponent) => {
  const sampleCtx = useContext(SampleCtx)
  return (
    <SampleProvider>
      <WrappedComponent
        value={sampleCtx.value}
        setValue={sampleCtx.setValue} />
    </SampleProvider>
  )
}

export {
  useSample
}

<小时>

// Sends.jsx
import React, { Component, useState, useEffect } from 'react'
import { useSample } from '../contexts/sample.jsx'

const Sends = (props) => {
  const [input, setInput ] = useState('')

  const handleChange = (e) => {
    setInput(e.target.value)
  }
  const handleSubmit = (e) => {
    e.preventDefault()

    props.setValue(input)
  }

  useEffect(() => {
    setInput(props.value)
  }, props.value)

  return (
    <form onSubmit={handleSubmit}>
      <input value={input} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  )
}

我得到的错误:

<块引用>

不变违规:无效的挂钩调用.钩子只能在函数组件的主体内部调用.这可能是由于以下原因之一而发生的: 1. 你的 React 和渲染器的版本可能不匹配(例如 React DOM) 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用见 https://reactjs.org/warnings/invalid-hook-call-warning.html 获取有关如何调试和修复此问题的提示.

Error I got:

对我的代码的解释:

我使用 Context API 来管理状态，之前我使用 class component 来制作视图.我希望结构简单明了，不需要更多细节.

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

我认为它应该也能工作，<Sends/> 组件被传递到 useSample HoC 函数中，并且它被 < 包裹起来.sample.jsx 的 SampleProvider> 组件，以便 可以使用 props 提供的 >SampleCtx 上下文.但结果是失败.

Explanation for my code:

I used Context API to manage the states, and previously I used class components to make the views. I hope the structure is straightforward that it doesn't need any more details.

将 HoC 模式与 React hooks 一起使用是否无效?或者通过props将变异函数(即useState()做出的setValue)交给其他组件是否无效?或者，在单个文件中使用 hooks 放置 2 个或更多 function components 是否无效?请问具体原因是什么.

I thought it should work as well, the <Sends /> component gets passed into useSample HoC function, and it gets wrapped with <SampleProvider> component of sample.jsx, so that <Sends /> can use the props provided by the SampleCtx context. But the result is failure.

推荐答案

所以 HOC 和 Context 是不同的 React 概念.因此，让我们将其一分为二.

解决方案

供应商

提供者的主要职责是提供上下文值.上下文值通过 useContext()

Provider

Main responsibility of the provider is to provide the context values. The context values are consumed via useContext()

HOC

消费者.使用 useContext() 钩子并添加额外的道具.返回一个新组件.

HOC

The consumer. Uses useContext() hook and adds additional props. Returns a new component.

然后使用 HOC:

Then using the HOC:

对提供者和消费者 (HOC) 进行组合，我们有:

export default useSample(Send)

Composting the provider and the consumers (HOC), we have:

);}

请参阅代码沙盒了解完整代码.

这篇关于带有 React Hook 的 HoC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！