reactjs - react Prop 与 child 。什么时候用什么？

Question

这两种方法有什么区别？

将按钮的文本作为 Prop 传递

<TextComponent title="Save"/>

function TextComponent(props){
  return <button>{props.title}<button/>
}

对比

作为子对象传递文本

<TextComponent>Save<TextComponent />

function TextComponent(props){
  return <button>{props.children}<button/>      
}

Answer 1

children 属性是当子组件中需要渲染的内容的结构不固定并且由渲染它的组件控制时使用的东西。

但是，如果组件的行为在其所有渲染中保持一致，则它可以定义它需要的特定 Prop ，并且父级可以将它们传递给它。

一个非常简单的例子是可以使用children的Navbar。对于导航栏，它需要呈现的项目以及项目的顺序或对齐方式取决于它需要如何在不同实例或跨不同页面使用。例如，Navbar 某处可以在一个地方有搜索组件，而在其他地方则没有。此外，有时可能需要左侧的菜单，右侧是登录菜单项，它们之间有一个搜索栏，有时它们可​​能全部显示在右侧，而没有搜索栏。在这种情况下，父组件可以控制内部结构