高阶组件中功能组件的道具

Posted

技术标签:

【中文标题】高阶组件中功能组件的道具【英文标题】:Functional Component's props in Higher Order Component 【发布时间】:2021-04-14 18:14:58 【问题描述】:

我试图理解将功能组件的道具传递给返回的功能组件

**代码 -------------------------------------------------------- ----

应用组件:

import React from 'react';
import ClickCounter from './ClickCounter';

const App = () => 
  return (
    <div className="App">
      <ClickCounter firstName="John" lastName="Doe"/>
    </div>
  );


export default App;

点击计数器组件:

import React from 'react'
import withCounter from './withCounter'

const ClickCounter = (props) => 

  const  count, incrementCount, name  = props

  return (
    <div className="click-counter">
      <button onClick=incrementCount>Click Button</button>
      <h2>name</h2>
      <h1>count</h1>
    </div>
  )


export default withCounter(ClickCounter, 10)

withCounter 组件 (HOC)

import React,  useState  from 'react'


const withCounter = (WrappedComponent, incrementNumber) => 
  return props =>            // ** A **
    console.log('props  ---- ', props)
    const [count, setCount] = useState(0)

    return (
      <WrappedComponent.      // ** B **
        count=count
        incrementCount=() => setCount(count + incrementNumber)
        ...props
      />
    )
  


export default withCounter

据我了解,withCounter 返回一个使用 useState Hook 的功能组件 (A),并返回另一个通过闭包访问状态的组件 (B)。

** 问题 -------------------------------

我的问题是为什么 A 中的 props 是 firstName="John" lastName="Doe",它是 React 的东西还是 javascript 的东西。

React 是否将参数的 props(即包装组件的 props)传递给返回的功能组件?还是 Javascript 的东西?

我在另一篇文章中看到它说它与咖喱有关,但我看不到它与咖喱有关,下面是我阅读的帖子

HoC with React Hooks

const useSample = WrappedComponent => props =>  // curry
  const sampleCtx = useContext(SampleCtx);
  return (
    <WrappedComponent
      ...props
      value=sampleCtx.value
      setValue=sampleCtx.setValue
    />
  );
;

谢谢!!

【问题讨论】:

【参考方案1】:

我的问题是为什么 A 中的 props 是 firstName="John" lastName="Doe",它是 React 的东西还是 Javascript 的东西。

这是因为这是您传递给 Counter 的道具。组件上的属性是传递给功能组件的道具。这是 React 的事情。

<ClickCounter firstName="John" lastName="Doe"/>

当您将组件 ClickCounter 放入树中时,实际上只是调用了 withCounter(ClickCounter, 10),因为这是您的默认导出。

withCounter 是一个返回另一个函数(curry)的函数,该函数接受 props 并返回一个组件。这是功能组件的设置。

React 运行这个函数并将 props firstName="John" lastName="Doe" 传递给该函数。然后,这些道具通过扩展运算符...props 添加到您的WrappedComponent

【讨论】:

以上是关于高阶组件中功能组件的道具的主要内容,如果未能解决你的问题,请参考以下文章

更新高阶组件中的道具

在反应中更改高阶组件中的道具

通过 React 高阶组件传递子道具的正确 TypeScript 类型

什么是渲染道具,它与高阶组件有什么不同?

VS 代码中是不是有打开父组件 AKA 传递道具的组件的功能?

如何将道具从功能组件传递到类组件