这两种方法有什么区别？
将按钮的文本作为props传递
<TextComponent title="Save"/>
function TextComponent(props){
return <button>{props.title}<button/>
}
对比
小时候传文字
<TextComponent>Save<TextComponent />
function TextComponent(props){
return <button>{props.children}<button/>
}
children当你不知道它们的时候应该提前使用，参见：https : //reactjs.org/docs/composition-vs-inheritance.html
在这里，如果您知道将在子组件中使用标题，只需使用命名props即可。
如果你问自己这个问题，我会说：“好的，但是通用组件会呈现什么？” 是你应该使用的时候children
children prop 是当需要在子组件中渲染的结构不固定并且由渲染它的组件控制时使用的东西。
但是，如果组件的行为在其所有渲染中保持一致，则它可以定义它需要的特定props，并且父级可以将它们传递给它。
一个非常简单的例子可能是Navbar可以使用children. 对于Navbar它需要呈现的项目以及顺序或对齐方式或项目取决于它需要如何在不同实例或跨不同页面使用。例如Navbar某处可以在一个地方有搜索组件而在其他地方没有它。此外，有时可能需要左侧的菜单，然后是右侧的登录菜单项和它们之间的搜索栏，有时它们可能都出现在没有搜索栏的右侧。在这种情况下，父组件可以控制内部结构的方式
您props.children在充当容器的组件上使用并且提前不知道他们的孩子。
基本上，props.children它用于在调用它时显示“包含”组件的开始和结束标记之间包含的任何内容。
正如 React 官方文档中提到的：
一些组件提前不知道他们的孩子。这对于像 Sidebar 或 Dialog 这样代表通用“框”的组件尤其常见。
我们建议，这些组件使用特殊的孩子托给孩子元素直接传递到它们的输出：
简单地说，它 props.children 只显示开始和结束标签之间的任何内容。
正如您在问题中所问的那样，您指定的用例没有太大区别。
但是，假设您有一个小的左侧图标，组件然后将“标题”作为单独的props传递会更有意义，例如。
<TextComponent title="Save" src="https://..." />
function TextComponent(props) {
return (
<div>
<img src={props.src}/>
<button>{props.title}<button/>
</div>
);
}