props，从父组件向子组件传输数据。他们在子组件里面不能被修改。由于从父组件传输出去的，所以被父组件所“拥有”。

import React, { Component} from 'react';

export default class GroceryList extends Component {
    render() {
        return (
            <ul>
                <ListItem quantity="1" name="Bread"/>
                <ListItem quantity="6" name="Eggs"/>
                <ListItem quantity="2" name="Milk"/>
            </ul>
        );
    }
}

class ListItem extends Component {
    render() {
        return (
            <li>
                {this.props.quantity} x {this.props.name}
            </li>
        );
    }
}

通过 props.children 来引用位于前置标签和后置标签之间的内容：

import React, { Component} from 'react';

export default class GroceryList extends Component {
    render() {
        return (
            <ul>
                <ListItem quantity="1">Bread</ListItem>
                <ListItem quantity="6">Eggs</ListItem>
                <ListItem quantity="2">Milk</ListItem>
            </ul>
        );
    }
}

class ListItem extends Component {
    render() {
        return (
            <li>
                {this.props.quantity} x {this.props.children}
            </li>
        );
    }
}