代码之家 › 专栏 › 技术社区 › Tomas Kubes

jsx内部的lambda是如何工作的?

jsx lambda javascript

Tomas Kubes · 技术社区 · 5 年前

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

JSX里面的这个lambda是什么?它是怎么工作的?

2 回复 | 直到 5 年前

CertainPerformance 5 年前

它被传递给 ErrorWithDelay 作为 children 属性名称,如您所见:

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

这个 儿童 属性与内部的函数表达式相同 延迟错误 ,具体来说:

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

这个 延迟错误 然后组件可以决定是否以及何时调用它。在这种情况下,只有在出现错误时才会调用它:

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

如果没有错误, null 将被返回,因此不会有任何文本。

felixmosh 5 年前

它是react中的一个设计模式,称为 render props .

术语render prop是指在react组件之间使用值为函数的prop共享代码的技术。

它工作的原因是这个lambda的父对象调用它并将一些内部状态传递给它。

我使用这种设计模式的一个经验法则是,当您有一个公共逻辑,但它可以以不同的方式呈现,所以公共逻辑将在父组件中,它将接收 children prop作为函数,该函数将返回元素。

就像你的情况一样, ErrorWithDelay 它内部有一些错误处理逻辑,它不知道如何呈现它,组件的用户定义了它将如何呈现(在您的情况下是 span )

推荐文章

Codeforces Fan · 如何在c中的STL集合中添加lambda函数或执行自定义操作++

2 年前

Amit Saha · Java Stream iterate在检查奇偶时不使用谓词

2 年前

zo Aoo · 当我在lambda函数中更改变量名时,结果会更改[重复]

2 年前

Albert Wijaya · 有没有办法让扩展名按字母顺序排列,而不是按长度排列?

2 年前

Criwran · Kotlin:类型推断失败。类型参数T的值应在输入类型中提及

2 年前

Sergei · 删除数据框中多个列的列表中的某些元素

3 年前

NormalLLer · 在java中,“运算符“<”不能应用于“<lambda参数>”,“int”

3 年前

Schadre · 我如何使用lambda的map函数将下面的列表从摄氏度转换为华氏度?

3 年前

Mainland · Python Dataframe将索引映射到一列列表以提取元素

3 年前

Mainland · Python Dataframe添加两列,其中包含列表

3 年前