这在React中意味着什么

Question

我在查看React组件的一些文档时，在第2行发现了以下语法：

<NProgress isAnimating>
{({ animationDuration, isFinished, progress }) => ( // <---- THIS LINE
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)}
</NProgress>

这个语法是什么？这些变量来自哪里？我认为React组件只能返回JSX元素。有人能给我一个简单的例子，说明这样的东西是如何编码的吗？

Answer 1

这里发生了几件事。

() => {}表示法称为箭头函数。这是一种ES6声明函数的方法，参数在括号中，函数在大括号中。

括号内的{x, y, z}表示法称为析构函数赋值。它获取一个对象，并将名称为x、y和z的属性值提取到变量中(在本例中，作为箭头函数的输入(。这就是变量来自函数内部的地方。

Answer 2

这是React.js中常用的一种模式，即Patric所说的渲染道具。但它使用的是儿童道具，而不是"；渲染"；道具。

请看一下代码的这一部分。

({ animationDuration, isFinished, progress }) => (
<Container animationDuration={animationDuration} isFinished={isFinished}>
<Bar animationDuration={animationDuration} progress={progress} />
<Spinner />
</Container>
)

这是功能组件的典型定义。所以，是的，NProgress组件的儿童道具就是一个组件。NProgress组件的定义如下代码所示。

export const NProgress = ({ children: Child }) => {
return (
<div className='container'>
<h1>Progress</h1>
<div className='content'>
<Child animationDuration={10} isFinished={false} progress={3} />
</div>
</div>
)
}

在上面的代码中，值(10，false，3(通常是NProgress组件的状态。