第三章，多个组件

示例：

import React, {Component} from 'react';
import {render} from 'react-dom';

class Avatar extends Component {
  render() {
    return (
      <div>
        <PagePic pagename={this.props.pagename} />
        <PageLink pagename={this.props.pagename} />
      </div>
    );
  }
}


class PagePic extends Component {
  render() {
    return (
      <img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
    );
  }
}

class PageLink extends Component {
  render() {
    return (
      <a href={'https://www.facebook.com/' + this.props.pagename}>
        {this.props.pagename}
      </a>
    );
  }
}

render(
  <Avatar pagename="Engineering" />,
  document.getElementById('example')
);

在上面的代码中，父组件Avatar拥有两个子组件PagePic和PageLink。 在React中，父组件可以设置子组件的props属性。

<Parent><Child /></Parent>

父组件可以通过this.props.children来访问子组件的prop。 通过React.Children工具类来操作它们。