Question

我的代码如下：

import React, {PropTypes} from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { filter_names } from './filterActions';
import Price from './price';
import Year from './year';
import Make from './make';
import Model from './model';
import Mileage from './mileage';
import Transmission from './transmission';
import Fuel from './fuel';

class filters extends React.Component {

    showFilters(filters){

        return filters.map(filter => {
            switch (filter.name){
                case filter_names.priceRange:
                    return <Price recap={filters.some(f => f.name === filter_names.priceRange)} title="Price" filters={filters} {...this.props}/>;
                case filter_names.year:
                    return <Year recap={filters.some(f => f.name === filter_names.year)} title="Year" filters={filters} {...this.props}/>;
                case filter_names.mileage:
                    return <Mileage recap={filters.some(f => f.name === filter_names.mileage)} title="Mileage" filters={filters} {...this.props}/>;
                case filter_names.fuel:
                    return <Fuel recap={filters.some(f => f.name === filter_names.fuel)} title="Fuel" filters={filters} {...this.props}/>;
                case filter_names.transmission:
                    return <Transmission recap={filters.some(f => f.name === filter_names.transmission)} title="Transmission" filters={filters} {...this.props}/>;
                default:
                    return true;
            }
        })
    }


    render(){
        const language = this.props.language;
        const filters = this.props.filters;

        return (
            <div className="filters noPadding col-xl-8 col-lg-6 col-md-6 col-sm-5 col-xs-12">
                <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
                    {this.showFilters(filters)}
                </ReactCSSTransitionGroup>
            </div>
        );
    }

}

export default filters;

有没有办法以更清洁的方式写它？我在showFilter函数中有所有这些组件。我是否需要为每个组件重复它，或者有更简单的方法吗？

Answer 1

为过滤器创建基类：

class BaseFilter extends React.Component {
    showFilters(filters){       
    }
}

从BaseFilter中导出所有过滤器类：

class AnotherFilter extends BaseFilter {
  render() {
  }
}

更清洁的方式来编写ReactJS组件

1 个答案: