zoukankan      html  css  js  c++  java
  • React 哲学 案例实现

    官网地址

    https://react.docschina.org/docs/thinking-in-react.html

    官网介绍了react开发的哲学,即思维模式,有助于理解和实际开发项目。值得推荐!

    class ProductCategoryRow extends React.Component {
      render() {
        const category = this.props.category;
        return (
          <tr>
            <th colSpan="2">
              {category}
            </th>
          </tr>
        );
      }
    }
    
    class ProductRow extends React.Component {
      render() {
        const product = this.props.product;
        const name = product.stocked ?
          product.name :
          <span style={{color: 'red'}}>
            {product.name}
          </span>;
    
        return (
          <tr>
            <td>{name}</td>
            <td>{product.price}</td>
          </tr>
        );
      }
    }
    
    class ProductTable extends React.Component {
      render() {
        const filterText = this.props.filterText;
        const inStockOnly = this.props.inStockOnly;
    
        const rows = [];
        let lastCategory = null;
    
        this.props.products.forEach((product) => {
          if (product.name.indexOf(filterText) === -1) {
            return;
          }
          if (inStockOnly && !product.stocked) {
            return;
          }
          if (product.category !== lastCategory) {
            rows.push(
              <ProductCategoryRow
                category={product.category}
                key={product.category} />
            );
          }
          rows.push(
            <ProductRow
              product={product}
              key={product.name}
            />
          );
          lastCategory = product.category;
        });
    
        return (
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Price</th>
              </tr>
            </thead>
            <tbody>{rows}</tbody>
          </table>
        );
      }
    }
    
    class SearchBar extends React.Component {
      constructor(props) {
        super(props);
        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
        this.handleInStockChange = this.handleInStockChange.bind(this);
      }
      
      handleFilterTextChange(e) {
        this.props.onFilterTextChange(e.target.value);
      }
      
      handleInStockChange(e) {
        this.props.onInStockChange(e.target.checked);
      }
      
      render() {
        return (
          <form>
            <input
              type="text"
              placeholder="Search..."
              value={this.props.filterText}
              onChange={this.handleFilterTextChange}
            />
            <p>
              <input
                type="checkbox"
                checked={this.props.inStockOnly}
                onChange={this.handleInStockChange}
              />
              {' '}
              Only show products in stock
            </p>
          </form>
        );
      }
    }
    
    class FilterableProductTable extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          filterText: '',
          inStockOnly: false
        };
        
        this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
        this.handleInStockChange = this.handleInStockChange.bind(this);
      }
    
      handleFilterTextChange(filterText) {
        this.setState({
          filterText: filterText
        });
      }
      
      handleInStockChange(inStockOnly) {
        this.setState({
          inStockOnly: inStockOnly
        })
      }
    
      render() {
        return (
          <div>
            <SearchBar
              filterText={this.state.filterText}
              inStockOnly={this.state.inStockOnly}
              onFilterTextChange={this.handleFilterTextChange}
              onInStockChange={this.handleInStockChange}
            />
            <ProductTable
              products={this.props.products}
              filterText={this.state.filterText}
              inStockOnly={this.state.inStockOnly}
            />
          </div>
        );
      }
    }
    
    
    const 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(
      <FilterableProductTable products={PRODUCTS} />,
      document.getElementById('container'));

    参考

    https://blog.csdn.net/antony1776/article/details/104711740/

  • 相关阅读:
    Sublime Text 3专题
    00.PHP学习建议
    php面试题及答案收藏(转)
    (转)如何快速掌握一门技术
    最全的MySQL基础【燕十八传世】
    UEditor编辑器并不难
    学习一门语言难在什么地方?
    PHP中关于位运算符 与 或 异或 取反
    WebP是什么图片格式?你了解PNG、JPG、WebP和GIF的区别吗?
    Mysql 外键设置
  • 原文地址:https://www.cnblogs.com/-roc/p/14918298.html
Copyright © 2011-2022 走看看