context.md example, when not to use contexts

I'm sorry if this comes across the wrong way. I understand the concept of contexts. What I don't quite understand is this example when to not use them.

It shows this example

<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... which renders ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... which renders ...
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

Being replaced by this

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

// Now, we have:
<Page user={user} avatarSize={avatarSize} />
// ... which renders ...
<PageLayout userLink={...} />
// ... which renders ...
<NavigationBar userLink={...} />
// ... which renders ...
{props.userLink}

and claims

This inversion of control can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components.

My gut reaction was the opposite. The Page component now needs to know details of the NavigationBar (it needs to know what elements/components NagivationBar needs. The Page component seems like it should have zero knowledge of what's in the NavigationBar. It should be passing down some opaque hunk of data and letting NavigationBar deal with it. That it does need to know the details is a strong coupling, not a loose coupling.

Is that a bad example that's trying to illustrated some bigger point but the example is just poorly chosen or am I maybe mis-understanding something?

先閱讀 context.md 中包含「何時不使用 contexts」範例及其周圍說明的部分。比較範例所述的 inversion-of-control 優點與此處提出的耦合疑慮，然後釐清或修訂範例，讓其預期的指引與取捨清楚明確。