什么是 {this.props.children} 以及何时应该使用它? [英] What is {this.props.children} and when you should use it?

问题描述

作为 React 世界的初学者，我想深入了解当我使用 {this.props.children} 时会发生什么以及使用相同的情况.它与以下代码片段的相关性是什么?

render() {如果(this.props.appLoaded){返回 (<div><标题appName={this.props.appName}currentUser={this.props.currentUser}/>{this.props.children}

);}}

解决方案

孩子"到底是什么?

React 文档说你可以在代表通用框"并且提前不知道他们的孩子的组件上使用 props.children.对我来说，这并没有真正解决问题.我敢肯定，这个定义对某些人来说很有意义，但对我来说却不是.

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

一个简单的例子:

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

const 图片 = (props) =>{返回 (<div><img src={props.src}/>{props.children}

)}

<块引用>

这个组件包含一个，它接收一些props，然后显示{props.children}.>

每当这个组件被调用时，{props.children} 也会被显示出来，这只是对组件开始和结束标记之间内容的引用.

//App.js使成为 () {返回 (
<图片键={picture.id} src={picture.src}>//放在这里的东西作为props.children传递</图片>
)}

<块引用>

而不是调用带有自关闭标签的组件 如果您调用它，它将完全打开和关闭标签 </Picture> 然后你可以在它之间放置更多的代码.

这将 组件与其内容分离，使其更易于重用.

参考:React 的 props.children 快速介绍

Being a beginner to React world, I want to understand in depth what happens when I use {this.props.children} and what are the situations to use the same. What is the relevance of it in below code snippet?

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

解决方案

What even is ‘children’?

The React docs say that you can use props.children on components that represent ‘generic boxes’ and that don’t know their children ahead of time. For me, that didn’t really clear things up. I’m sure for some, that definition makes perfect sense but it didn’t for me.

My simple explanation of what this.props.children does is that it is used to display whatever you include between the opening and closing tags when invoking a component.

A simple example:

Here’s an example of a stateless function that is used to create a component. Again, since this is a function, there is no this keyword so just use props.children

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

This component contains an <img> that is receiving some props and then it is displaying {props.children}.

Whenever this component is invoked {props.children} will also be displayed and this is just a reference to what is between the opening and closing tags of the component.

//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>
  )
}

Instead of invoking the component with a self-closing tag <Picture /> if you invoke it will full opening and closing tags <Picture> </Picture> you can then place more code between it.

This de-couples the <Picture> component from its content and makes it more reusable.

Reference: A quick intro to React’s props.children

这篇关于什么是 {this.props.children} 以及何时应该使用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！