React HOC 函数如何知道作为参数放入其中的 Component 的 props答案

【问题标题】：How React HOC function knows the props of a Component that put into it as a parameterReact HOC 函数如何知道作为参数放入其中的 Component 的 props
【发布时间】：2021-10-17 07:35:27
【问题描述】：

我试图了解 React HOC 是如何工作的。以下代码将在下面编写，但我不明白为什么它会起作用：

const MyHOC = (WrappedComponent) => { 

    return (props) => {   //these props are the props of a WrappedComponent
        return (
            <div style={{color: "red", fontSize: "100px"}}>
                <WrappedComponent {...props}/>
            </div>
        )
    }

}

export default MyHOC

之后，我在这里使用我的 hoc：

import MyHOC from "../HOC/MyHOC"   //hoc

const SomeStuff = (props) => {  

    return (
        <div>
            Hello world!!!
            {
                props.data.map(item => {
                    return <div>{item}</div>
                })
            }
        </div>
    )
}
//our component wrapped with a hoc
export default MyHOC(SomeStuff)

然后，我在这里实现我的组件，它们成功地工作

import SomeStuff from "./COMPONENTS/SomeStuff"

function App() {

  const list = ['apple', 'orange', 'lemon']


  return (
    <div>
      <SomeStuff data={list}/>
    </div>
  );
}

export default App;

在上面编写的代码的第一个 sn-p 中，我们创建了一个以“WrappedComponent”为参数的函数。这个函数返回另一个函数，它以 props 为参数。

我的问题是：如果我们没有在任何地方声明它们，返回的函数如何知道哪些道具作为参数放置。

我们将一个组件作为参数传递给一个 PARENT 函数，但做出反应后发现我们需要在这个“WrappedComponent”中使用的道具

这怎么可能？

拜托，拜托，请帮我找到答案......

非常感谢您

【问题讨论】：

标签： javascript reactjs closures

【解决方案1】：

返回的函数如何知道什么道具作为参数，如果我们这样做了不要在任何地方声明它们。

当你执行时：

<SomeStuff data={list}/>

您将data 属性传递给SomeStuff（已包装）组件，该组件在此处导出：

export default MyHOC(SomeStuff)

这首先调用MyHOC() 函数并返回(props) => { 函数，该函数充当SomeStuff 的包装组件。当我们导出它时使用这个包装组件（见上面这个答案的开头）。结果，包装组件通过data={list} 传递，该组件通过返回的props 函数的props 参数进行访问-在您的示例中，道具将是一个看起来（大致）像{data: list} 的对象。

React 以某种方式发现我们需要在此使用的道具 “包装组件”

您的包装组件能够通过扩展语法将 props 对象转发到实际的 SomeStuff 组件中：

<WrappedComponent {...props}/>

这会从 props 对象中获取每个（自己可枚举的）key: value 对，并将其作为 key={value} 属性添加到目标组件（即实际的 SomeStuff 组件）。

【讨论】：

【解决方案2】：

SomeStuff 在主应用程序中将数据作为道具。

被导出的一些东西被 HOC 包装为声明的。

export default MyHOC(SomeStuff)

所以，组件，即。从 SomeStuff 模块导出的函数有点：

(props) => {   //these props are the props of a WrappedComponent
        return (
            <div style={{color: "red", fontSize: "100px"}}>
                <WrappedComponent {...props}/>
            </div>
        )
    }

在这里，WrappedComponent 是 SomeStuff，您传递的数据（即 prop）正按原样传递给 SomeStuff 组件。

【讨论】：

【解决方案3】：

您确实使用<WrappedComponent {...props}/> 声明了它们，这将获取您传递给 HOC 的道具并将其传递给孩子。扩展运算符... 将拆分 HOC 收到的 prop 数组并将其作为单独的 props 传递给子组件，就像您通常调用该组件一样。

【讨论】：