Question

作为React世界的初学者，我想深入了解当我使用render() { if (this.props.appLoaded) { return ( <div> <Header appName={this.props.appName} currentUser={this.props.currentUser} /> {this.props.children} </div> ); } }时会发生什么以及使用相同的情况。它在下面的代码片段中的相关性是什么？

def update_treeview(self):
    adjustment = self.scrolled_window.get_vadjustment()
    value = adjustment.get_value()
    self.process_list_store.clear()
    p_list = create_list(self.properties, create_list_of_processes())
    for p in p_list:
        self.process_list_store.append(list(p))
    GObject.idle_add(adjustment.set_value, value)
    return True

Answer 1

甚至'儿童'还有什么？

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>组件与其内容分离，使其更具可重用性。

参考：A quick intro to React’s props.children

Answer 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组件的一个特殊属性，它包含组件中定义的所有子元素，例如：上方divs内的Example。 {this.props.children}包括渲染结果中的那些孩子。

......使用相同的情况是什么

当你想直接在渲染输出中包含子元素时，你会这样做，不变;如果你没有，那就没有了。

Answer 3

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>

什么是{this.props.children}以及何时应该使用它？

3 个答案: