这在 React 中意味着什么？

Question

I was looking at some documentation for a React component and came across this syntax on line 2:

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

What is this syntax and where did these variables come from? I thought React components could only return JSX elements. Could someone provide me with a simple example of how something like this is coded?

Answer 1

There are a couple of things happening, here.

The () => {} notation is called an arrow function . It's an ES6 way of declaring a function, with arguments in the parentheses and a function inside the curly braces.

The {x, y, z} notation inside the parentheses is called a destructuring assignment. It takes an object and extracts the values of properties with the names x, y, and z into variables (in this case, as the inputs to an arrow function). That's where the variables are coming from inside the function.

Answer 2

This is one kind of pattern commonly used in React.js, ie render props as Patric said. But it is using children props instead of "render" props.

Please have a look at this part of your code.

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

This is a typical definition of functional component. So, yes, children props of the NProgress component is a component. The definition of NProgress component would looks like the following code.

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

In the above code, typically the values(10, false, 3) would be typically state of the NProgress component.