一个例子:

class ProductCategoryRow extends React.Component {    render() {        return ({this.props.category});    }}class ProductRow extends React.Component {    render() {        var name = this.props.product.stocked ?            this.props.product.name :                    {this.props.product.name}      ;        return (                            {name}                {this.props.product.price}                    );    }}class ProductTable extends React.Component {    render() {        var rows = [];        var lastCategory = null;        this.props.products.forEach((product) => {            if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {                return;            }            if (product.category !== lastCategory) {                rows.push(
    );            }            rows.push(
    );            lastCategory = product.category;        });        return (            
    
      {rows}
                     
                      
                           
Name
                           
Price
                      
                     
                     
     
                
        );    }}class SearchBar extends React.Component {    constructor(props) {        super(props);        this.handleChange = this.handleChange.bind(this);    }    handleChange() {        this.props.onUserInput(            this.filterTextInput.value,            this.inStockOnlyInput.checked        );    }    render() {        return (            
    
                
      this.filterTextInput = input}                    onChange={this.handleChange}                />                
     
                     this.inStockOnlyInput = input}                        onChange={this.handleChange}                    />                    {' '}                    Only show products in stock                
            
    
        );    }}class FilterableProductTable extends React.Component {    constructor(props) {        super(props);        this.state = {            filterText: '',            inStockOnly: false        };        this.handleUserInput = this.handleUserInput.bind(this);    }    handleUserInput(filterText, inStockOnly) {        this.setState({            filterText: filterText,            inStockOnly: inStockOnly        });    }    render() {        return (            
    
                
                     
                 
    
        );    }}var PRODUCTS = [    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},    {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},    {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},    {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}];ReactDOM.render(    
    ,    document.getElementById('main_center'));