Question

两种方法有什么区别？

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

   <TextComponent title="Save"/>

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

vs

以儿童身份传递文字

     <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道具是当子组件中需要渲染的东西的结构不固定并由渲染它的组件控制时使用的道具。

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

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

Answer 3

当您知道自己的道具是什么时，请使用道具。否则，请使用子级（也称为containment）。

除此之外，在您的情况下使用道具/孩子取决于您想传递的内容：

如果它是单个道具（例如item），那么选择哪种方法都没关系。
否则，您应该检查children内部传递的内容，因为您可能会传递其他不想呈现的值。

我建议您使用选择性方法（例如props.title），因为您始终知道组件内部发生了什么。

Answer 4

您在组件上使用props.children，该组件充当容器并且不提前知道其子级。

基本上props.children用于在调用“包含”组件的开始和结束标记之间显示包含的任何内容。

Answer 5

如React官方文档中所述：

某些组件不提前知道自己的孩子。对于侧栏或对话框之类的代表通用“框”的组件，这尤其常见。

我们建议此类组件使用特殊的 children 道具将子元素直接传递到其输出中：

简单地说，它是props。孩子们只显示开始和结束标签之间的内容。

如您所提问题，您指定的用例有不差异。

但是，假设您的组件左侧有一个小图标，然后将“ title”作为单独的道具传递，将更有意义。例如，

<TextComponent title="Save" src="https://..." />

    function TextComponent(props){
        return (
                <div>
                    <img src={props.src}/>
                    <button>{props.title}<button/>
                </div>
       );
   }

对小孩做出反应的道具。什么时候使用？

5 个答案: