Javascript 从组件获取'children'道具

更新：

对于任何像我一样对此有所了解和困惑的人来说，本页描述了发生的事情——我对React组件和React元素的困惑

原始问题：

下面链接的页面表明，在使用

FunctionComponent

时，默认情况下会传递

children

道具，但它似乎对我不起作用。在以下情况下，

props.children

未定义。我还在学反应--我做错了什么

import React, { FunctionComponent } from "react"

type Props = {
  myProp: string
}

const Nav: FunctionComponent<Props> = (props) => {
    console.log(props.myProp, props.children)
    return (
    <main>
        <nav>
        <a href="foo">FOO</a>
        <a href="bar" className="active">BAR</a>
      </nav>
    </main>
  )
}

// This component is rendered from within another component, e.g. `return (<div><Nav /></div>)

import React，{FunctionComponent}来自“React”
类型道具={
myProp:字符串
}
const Nav:FunctionComponent=（道具）=>{
console.log（props.myProp，props.children）
返回(
)
}
//此组件是从另一个组件中呈现的，例如“return（）

我的最终目标是以某种方式访问子属性。例如，

活动的

类

---

来源：

props.children===未定义

，因为您正在渲染

<div>
  <Nav />
</div>

而且

中没有子元素

如果你把它改成

<Nav myProp="Hello">
  World!
</Nav>

世界！

---

然后

console.log（props.myProp，props.children）

将在控制台中打印“Hello World！”。

您返回的不是功能组件。这是一个字符串。而且你似乎直接调用了该函数，实际上没有一个children道具，不让React呈现它。在实际的应用程序中，它不是字符串，但没有字符串，我无法让它在JS Fiddle中工作。注意并编辑。该应用程序从另一个组件中呈现此组件，例如

返回（

）。我将删除innerHTML以避免混淆。我明白了--

子组件
道具与
导航
组件的返回/呈现无关……感谢您的解释！