从组件中获取 `children` 属性答案

【问题标题】：Get `children` prop from component从组件中获取 `children` 属性
【发布时间】：2020-12-05 20:31:06
【问题描述】：

更新：

对于任何像我一样学习和困惑的人，这个页面描述了正在发生的事情——我的困惑是在 React component 与 React elements 之间 https://reactjs.org/docs/rendering-elements.html

原始问题：

下面链接的页面建议使用FunctionComponent 时默认传递children 属性，但它似乎对我不起作用。在以下情况下，props.children 未定义。我还在使用 React——我做错了什么？

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>)

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

来源：https://fettblog.eu/typescript-react/children/

【问题讨论】：

这不是您要返回的功能组件。那是一个字符串。
另外你似乎直接调用了那个函数，实际上没有 children 道具，没有让 React 渲染它。
在实际应用程序中它不是字符串，但没有字符串我无法让它在 JS Fiddle 中工作。已记录和编辑。
应用程序从另一个组件中渲染这个组件，例如return (<div><Nav /> </div>。我将删除 innerHTML 以避免混淆。

标签： javascript reactjs typescript

【解决方案1】：

props.children === undefined 因为你正在渲染

<div>
  <Nav />
</div>

并且<Nav /> 中没有子元素。

如果你把它改成类似的东西

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

然后console.log(props.myProp, props.children) 将打印“Hello World！”在控制台中。

【讨论】：

我明白了——children 属性与Nav 组件的返回/渲染无关...谢谢您的解释！