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

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

应用程序组件：

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)

与计数器组件（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

根据我的理解，with计数器返回一个使用useState Hook的功能组件（A），并返回另一个通过闭包访问状态的组件（B）。

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

我的问题是为什么A中的道具是firstName="John"lastName="Doe"，是React的东西还是Javascript的东西。

React是否将参数的道具（即包装组件的道具）传递给返回的功能组件？还是Javascript的东西？

我在另一个帖子里看到说和咖喱有关，但是我看不出和咖喱有关，下面是我看到的帖子

带反应钩的HoC

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

谢谢你！！