Functional Component 在 Higher Order Component 中的 props
Functional Component's props in Higher Order Component
我正在尝试了解将功能组件的道具传递给 returned 功能组件
**代码---------------------------------------- ------
应用程序组件:
import React from 'react';
import ClickCounter from './ClickCounter';
const App = () => {
return (
<div className="App">
<ClickCounter firstName="John" lastName="Doe"/>
</div>
);
}
export default App;
ClickCounter 组件:
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 return 一个使用 useState Hook 的功能组件 (A),它 return 另一个通过闭包访问状态的组件 (B)。
** 问题 -------------------------------------- -
我的问题是为什么A里面的props是firstName="John" lastName="Doe"
,是React的东西还是Javascript的东西
React 是否将参数的 props(即包装组件的 props)传递给 returned 功能组件?还是Javascript的东西?
我在另一个post看到它说它与咖喱有关,但我看不出它与咖喱有关,下面是post我读到的
const useSample = WrappedComponent => props => { // curry
const sampleCtx = useContext(SampleCtx);
return (
<WrappedComponent
{...props}
value={sampleCtx.value}
setValue={sampleCtx.setValue}
/>
);
};
谢谢!!
我的问题是为什么 A 中的道具是 firstName="John" lastName="Doe",它是 React 的东西还是 Javascript 的东西。
这是因为这是您传递给 Counter
的道具。组件上的属性是传递给功能组件的道具。这是 React 的东西。
<ClickCounter firstName="John" lastName="Doe"/>
当您将组件 ClickCounter
放入您的树中时,它实际上只是 withCounter(ClickCounter, 10)
被调用,因为这是您的默认导出。
withCounter
是一个函数,returns 另一个函数(咖喱)接受 props 和 returns 一个组件。这是功能组件的设置。
React 运行此函数并将道具 firstName="John" lastName="Doe"
传递给该函数。然后,这些道具通过传播运算符 {...props}
.
添加到您的 WrappedComponent
我正在尝试了解将功能组件的道具传递给 returned 功能组件
**代码---------------------------------------- ------
应用程序组件:
import React from 'react';
import ClickCounter from './ClickCounter';
const App = () => {
return (
<div className="App">
<ClickCounter firstName="John" lastName="Doe"/>
</div>
);
}
export default App;
ClickCounter 组件:
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 return 一个使用 useState Hook 的功能组件 (A),它 return 另一个通过闭包访问状态的组件 (B)。
** 问题 -------------------------------------- -
我的问题是为什么A里面的props是firstName="John" lastName="Doe"
,是React的东西还是Javascript的东西
React 是否将参数的 props(即包装组件的 props)传递给 returned 功能组件?还是Javascript的东西?
我在另一个post看到它说它与咖喱有关,但我看不出它与咖喱有关,下面是post我读到的
const useSample = WrappedComponent => props => { // curry
const sampleCtx = useContext(SampleCtx);
return (
<WrappedComponent
{...props}
value={sampleCtx.value}
setValue={sampleCtx.setValue}
/>
);
};
谢谢!!
我的问题是为什么 A 中的道具是 firstName="John" lastName="Doe",它是 React 的东西还是 Javascript 的东西。
这是因为这是您传递给 Counter
的道具。组件上的属性是传递给功能组件的道具。这是 React 的东西。
<ClickCounter firstName="John" lastName="Doe"/>
当您将组件 ClickCounter
放入您的树中时,它实际上只是 withCounter(ClickCounter, 10)
被调用,因为这是您的默认导出。
withCounter
是一个函数,returns 另一个函数(咖喱)接受 props 和 returns 一个组件。这是功能组件的设置。
React 运行此函数并将道具 firstName="John" lastName="Doe"
传递给该函数。然后,这些道具通过传播运算符 {...props}
.
WrappedComponent