children prop是在子组件中需要呈现的内容的结构不固定并且由呈现它的组件控制时使用的东西。
但是,如果组件的行为在所有渲染中均保持一致,则它可以定义所需的特定道具,而父代可以将它们传递给它。
一个非常简单的示例Navbar可以使用children。对于aNavbar,它需要呈现的项目以及顺序或对齐方式或项目取决于在不同实例或不同页面上如何使用它。例如,Navbar某个地方可以在一个地方具有搜索组件,而在其他地方则没有它。同样,有时可能需要在左侧添加菜单,然后在右侧添加“登录”菜单项,并在它们之间使用搜索栏,有时它们可能全部显示在右侧而没有搜索栏。在这种情况下,父组件可以控制内部结构的方式
两种方法有什么区别?
传递按钮文字作为道具
<TextComponent title="Save"/> function TextComponent(props){ return <button>{props.title}<button/> }
与
小时候传递文字
<TextComponent>Save<TextComponent /> function TextComponent(props){ return <button>{props.children}<button/> }