反应道具与儿童。什么时候用？

Question

这两种方法有什么区别？

将按钮的文本作为道具传递

<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当你不知道它们的时候你应该提前使用，参见：https : //reactjs.org/docs/composition-vs-inheritance.html

在这里，如果您知道将在子组件中使用标题，只需使用命名道具即可。

如果你问自己这个问题，我会说：“好的，但是通用组件会呈现什么？” 是你应该使用的时候children

Answer 2

children prop 是当需要在子组件中呈现的结构不固定并且由呈现它的组件控制时使用的东西。

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

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