什么是{this.props.children}，什么时候应该使用它？

javascript reactjs react-redux

2022-08-30 01:15:47

作为 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

什么是“儿童”？

React 文档说，你可以在代表“通用盒子”的组件上使用，并且这些组件事先不认识他们的孩子。对我来说，这并没有真正解决问题。我敢肯定，对于某些人来说，这个定义是完全有道理的，但对我来说却不是。props.children

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

一个简单的例子：

下面是用于创建组件的无状态函数的示例。同样，由于这是一个函数，因此没有关键字，因此只需使用thisprops.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 的快速介绍

答案 2

我假设你在 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 组件的一个特殊属性，它包含组件中定义的任何子元素，例如上面的内部元素。在呈现的结果中包括这些子项。divsExample{this.props.children}

...使用相同内容的情况有哪些

当您想要将子元素直接包含在渲染的输出中时，可以这样做，而保持不变;如果你没有，就不会。