Question

我正在阅读本教程：

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

他们有这样的陈述：

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

据我了解，Component被传递给该函数，然后其props被隐式获取并馈入return函数。我不知道React是如何做到的。老实说，我期望像(Component) => (Component.props)这样的东西。这是什么机制？仅当我们将参数提供为props或可以提供任何名称时，它是否正确映射？这种隐式分配有一个特定的名称吗？

更新

也许我还不够清楚，但是我真正感兴趣的是props在内部函数中出现的位置，如果它们没有传递给先前的外部函数。我知道HOC的工作原理，如何思考它们，但是这一刻还不清楚，React中的工作是什么？是否有某种engine在后台运行，idk ...

Answer 1

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

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

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

内部未命名函数是功能组件。它接受属性并以null或Component的形式呈现。

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

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

具体来说，当您致电时：

class MyComponent: React.Component {
}

const myComponentWithTodosNull = withTodosNull(MyComponent);

与写作相同：

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

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

Answer 2

此技术称为higher-order components（HOC），是一种通过一些额外功能扩展组件的方法。

如果使用常规函数而不是箭头函数重写它，一开始看起来可能会更容易：

function withTodosNull(Component) {
  return function(props) {
    if (!props.todos) {
      return null;
    } else {
      return <Component {...props} />
    }
  }
}

withTodosNull接受一个组件并返回一个新的组件。如果返回的这个新组件得到一个todos道具，则传递给HOC的组件将与所有道具一起呈现。如果未将todos作为道具，则会渲染null。

Answer 3

高阶组件是“增强”作为参数传递的组件的函数。要了解道具从何而来，让我们看看使用这种组件会是什么样子。

这是我们的基本组件，该组件将传递给HoC：

function TodoList(props) {
  return (
    <div>We have {props.todos.length} tasks to do!</div>
  );
}

现在，我们可以使用HoC来创建新的“增强型”组件，当没有任何任务时，该组件会阻止显示此消息：

const EnhancedTodoList = withTodosNull(TodoList);

然后，我们可以使用这个新组件来呈现消息（或者，如果没有任何任务，则不可以）：

<EnhancedTodoList todos={someTodos} />

如您所见，EnhancedTodoList是第一个组件，它得到todos。然后，它决定在没有待办事项的情况下，是否应将道具传递给TodoList或将其返回null。

Todos是从呈现HoC的组件中显式传递的。 EnhancedTodoList的行为就像TodoList的过滤器。

反应隐式映射机制

3 个答案: