理论学习 + demo产出

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;    console.log(this.props.inStockOnly)    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.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);    this.handleInStockInputChange = this.handleInStockInputChange.bind(this);  }    handleFilterTextInputChange(e) {    this.props.onFilterTextInput(e.target.value);  }    handleInStockInputChange(e) {    this.props.onInStockInput(e.target.checked);  }    render() {    return (      
    
        
             
     
                    {' '}          Only show products in stock        
      
    
    );  }}class FilterableProductTable extends React.Component {  constructor(props) {    super(props);    this.state = {      filterText: '',      inStockOnly: false    };        this.handleFilterTextInput = this.handleFilterTextInput.bind(this);    this.handleInStockInput = this.handleInStockInput.bind(this);  }  handleFilterTextInput(filterText) {    this.setState({      filterText: filterText    });  }    handleInStockInput(inStockOnly) {    this.setState({      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('container'));

class CommentList extends React.Component {  constructor() {    super();    this.handleChange = this.handleChange.bind(this);    this.state = {      // "DataSource" 就是全局的数据源      comments: DataSource.getComments()    };  }  componentDidMount() {    // 添加事件处理函数订阅数据    DataSource.addChangeListener(this.handleChange);  }  componentWillUnmount() {    // 清除事件处理函数    DataSource.removeChangeListener(this.handleChange);  }  handleChange() {    // 任何时候数据发生改变就更新组件    this.setState({      comments: DataSource.getComments()    });  }  render() {    return (      
    
             {this.state.comments.map((comment) => (          
             ))}      
    
    );  }}class BlogPost extends React.Component {  constructor(props) {    super(props);    this.handleChange = this.handleChange.bind(this);    this.state = {      blogPost: DataSource.getBlogPost(props.id)    };  }  componentDidMount() {    DataSource.addChangeListener(this.handleChange);  }  componentWillUnmount() {    DataSource.removeChangeListener(this.handleChange);  }  handleChange() {    this.setState({      blogPost: DataSource.getBlogPost(this.props.id)    });  }  render() {    return 
    ;  }}const CommentListWithSubscription = withSubscription(  CommentList,  (DataSource) => DataSource.getComments());const BlogPostWithSubscription = withSubscription(  BlogPost,  (DataSource, props) => DataSource.getBlogPost(props.id));// 函数接受一个组件参数……function withSubscription(WrappedComponent, selectData) {  // ……返回另一个新组件……  return class extends React.Component {    constructor(props) {      super(props);      this.handleChange = this.handleChange.bind(this);      this.state = {        data: selectData(DataSource, props)      };    }    componentDidMount() {      // ……注意订阅数据……      DataSource.addChangeListener(this.handleChange);    }    componentWillUnmount() {      DataSource.removeChangeListener(this.handleChange);    }    handleChange() {      this.setState({        data: selectData(DataSource, this.props)      });    }    render() {      // ……使用最新的数据渲染组件      // 注意此处将已有的props属性传递给原组件      return 
    ;    }  };}