时间戳

首页 > 解决方案 > React 隐式映射机制

reactjs - React 隐式映射机制

问题描述

我正在阅读教程：

https://www.robinwieruch.de/gentle-introduction-higher-order-components/

他们有这样的陈述：

const withTodosNull = (Component) => (props) =>
  !props.todos
    ? null
    : <Component { ...props } />

据我了解Component，它被传递给函数，然后它props被隐式地获取并馈送到返回函数中。我不明白这React是怎么做到的。老实说，我会期待类似的东西(Component) => (Component.props)。这是什么机制？props仅当我们提供参数 as或我们可以提供任何名称时，它是否正确映射？这种隐式分配是否有特定名称？

更新

也许我不够清楚，但我真正感兴趣的是，props如果它们没有传递给前一个外部函数，它们从哪里出现在内部函数中。我了解 HOC 是如何工作的，如何思考它们，但是现在还不清楚，这是什么在React做呢？有没有engine在幕后奔波，idk...

标签： reactjs

解决方案

如果我们使用 classic 重写箭头函数可能会更容易理解function()：

function withTodosNull(Component) {
   return function(props) {
      if (!props.todos) {
         return null;
      }

      return <Component {...props} />;
   }
}

内部未命名函数是一个函数组件。它接受属性并呈现为null或 as Component。

外部函数称为高阶组件（HoC）。它是一个函数，它包装一个组件并返回一个新组件。

Component和之间没有联系props。它们只是两个不同函数的参数。

具体来说，当您致电时：

class MyComponent: React.Component {
}

const myComponentWithTodosNull = withTodosNull(MyComponent);

它与写作相同：

const myComponentWithTodosNull = props => {
  if (!props.todos) {
    return null;
  }

  return <MyComponent {...props} />;
}

推荐阅读