javascript - JSX内部的lambda如何工作？

在React Final Form examples中，我可以看到一个构造：

<ErrorWithDelay name="firstName" delay={1000}>
    {error => <span>{error}</span>}
</ErrorWithDelay>

JSX中的这个lambda是什么？这个怎么运作？

最佳答案

您可以将其作为ErrorWithDelay属性名称传递给children函数，如您所见：

const ErrorWithDelay = ({ name, children, delay }) => (

children属性与ErrorWithDelay中的函数表达式相同，具体来说：

error => <span>{error}</span>

然后，ErrorWithDelay组件可以决定是否以及何时调用它。在这种情况下，只有在出现错误时才调用它：

return error && ((touched && !active) || (touched && !show && active) || show)
  ? children(error)
  : null

如果没有错误，将返回null，因此那里没有任何文本。