高阶组件中功能组件的道具
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 类型