什么是{this.props.children}?何时使用?


118

作为React世界的初学者,我想深入了解我使用时会发生{this.props.children}什么以及使用该情况的情况。以下代码段的意义是什么?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}


1
在给定的链接中,不清楚在组件内部使用{this.props.children}时会发生什么。
尼米

Answers:


174

“孩子”到底是什么?

React文档说,您可以props.children在代表“通用框”并且不提前知道其子级的组件上使用。对我来说,这并没有真正清除一切。我可以肯定的是,这个定义很合理,但对我而言却不是。

我对操作的简单解释this.props.children是,它用于在调用组件时显示在开始和结束标记之间包含的所有内容。

一个简单的例子:

这是用于创建组件的无状态函数的示例。同样,由于这是一个函数,因此没有this关键字,因此只需使用props.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

此组件包含一个<img>正在接收一些内容的props,然后显示{props.children}

每当调用此组件{props.children}时,也会显示该组件,这仅是对该组件的开始和结束标记之间的引用。

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

<Picture />如果调用该组件将完全打开和关闭标签<Picture> </Picture>,则无需使用自动关闭标签来调用该组件,而是可以在其之间放置更多代码。

这将<Picture>组件与其内容分离开来,并使其更可重用。

参考:React的props.children快速入门


如果子节点不关心可重用性,那么从子组件调用{props.children}时的性能与在子组件内部使用时是否有性能差异?
尼米

1
@Nimmy使用{props.children}时,我们没有性能问题,只需要将传递的组件作为props。当我们可以在子组件中使用子代时,则无需使用{props.children}
Soroush Chehresa


1
例子是来自codeburst.io/...
Alpit阿南德

1
@AlpitAnand您可以在答案末尾看到参考:|
Soroush Chehresa

24

我假设您在React组件的render方法中看到了这种情况,如下所示(编辑:您编辑过的问题确实显示了这一点)

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

children是React组件的特殊属性,它包含在组件内定义的任何子元素,例如上面的divs内部Example{this.props.children}在渲染结果中包括那些子代。

...使用相同情况的情况

当您想直接将子元素直接包含在渲染输出中时,可以这样做;如果没有,则不会。


如果子节点不关心可重用性,那么从子组件调用{props.children}时的性能与在子组件内部使用时是否有性能差异?
尼米

@Nimmy:对不起,我不知道您的意思是*“ ...比在子组件中使用它”。
TJ Crowder

我的意思是“在子组件中调用{this.props.children}而不是在相应的子组件中直接写入节点”。
尼米

2
@Nimmy我假设您在想为什么我应该放{this.props.children}而不是我可以写下来,我知道。如果是这种情况,请这样做,并且在性能上会有一点优势。但是您的组件将是静态的,不能与代码库中不同位置的一组不同的子代重用。
Subin Sebastian

2
@ssk:啊!好一个。尼米-是的,您可以直接在子代中写子代render,但在每种情况下它们都是相同的子代。通过接受子元素(在适当的地方),组件的每个实例可以具有不同的内容。我已经在答案中更新了示例。
TJ Crowder

0

props.children 表示调用/渲染组件时,开始标签和结束标签之间的内容:

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

调用/调用/渲染Foo

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>

道具和道具。儿童

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.