需求

领导说现在的流程管理虽然能显示这个流程是否完成，但我想要更多信息，比如这个流程是否在客户要求的时间内完成的，你来想想吧

现在的流程元素在页面上长这样

未完成前： 完成后：

需求--->问题

我的问题变成了：

• 怎么样把现在的组件改的能提供更多信息又好看
• 这个组件在多处使用，怎么无痛又优雅的修改代码

我的思考：

• 可以在文字后面加一个icon，颜色表示是否要求时间内完成，hove后显示具体完成时间，样式是个无限花时间的事，不如先做一个最粗狂的，有时间了再优化，先做功能再做样式
• 看看当前代码情况，能不能改

动手

现在实现

export default class ProcessFlow extends React.PureComponent {
  state = {};

  checkCurrentStepNum = () => {
// not relevant
  };

  render() {
    const currentStepIndex = this.checkCurrentStepNum();
    return (
      <section className="po-block">
        <div className="container-fluid">
          <ul className="list-unstyled multi-steps">
            {this.props.processSteps.map((item, index) => (
              <li
                className={classnames({
                  'is-active':
                    index >= currentStepIndex &&
                    currentStepIndex !== this.props.processSteps.length - 1,
                  current:
                    index === currentStepIndex &&
                    currentStepIndex !== this.props.processSteps.length - 1
                })}
                key={item.step}
                title={
                  index === currentStepIndex &&
                  currentStepIndex !== this.props.processSteps.length - 1
                    ? 'Process is running'
                    : ''
                }
              >
                {item.step} // 显示consolidation文本
              </li>
            ))}
          </ul>
        </div>
      </section>
    );
  }
}

粗暴的改法是，我复制一个组件，给个新名字，把UI部分修改一下，在需要添加是否完成信息的页面，使用新的组件。 这样做的坏处：

• 代码丑陋，重复率太高
• 维护复杂，如果需要修改通用部分就需要在两个地方都修改

有什么改法：

1. 使用子组件，现在props中没有子组件，可以传入一个子组件
2. 试试继承？

1. 使用子组件，现在props中没有子组件，可以传入一个子组件

export default class ProcessFlow extends React.PureComponent {
  state = {};

  checkCurrentStepNum = () => {
//not relevant
  };

  render() {
    const currentStepIndex = this.checkCurrentStepNum();
    // console.log(this.props, currentStepIndex);
    return (
      <section className="po-block">
        <div className="container-fluid">
          <br />
          <br />
          <ul className="list-unstyled multi-steps">
            {this.props.processSteps.map((item, index) => (
              <li
                className={classnames({
                  'is-active':
                    index >= currentStepIndex &&
                    currentStepIndex !== this.props.processSteps.length - 1,
                  current:
                    index === currentStepIndex &&
                    currentStepIndex !== this.props.processSteps.length - 1
                })}
                key={item.step}
                title={
                  index === currentStepIndex &&
                  currentStepIndex !== this.props.processSteps.length - 1
                    ? 'Process is running'
                    : ''
                }
              >
                {item.step}
               {this.props.children} //允许传入一个子组件
              </li>
            ))}
          </ul>
        </div>
      </section>
    );
  }
}

ProcessFlow.propTypes = {
  currentStatus: PropTypes.string.isRequired,
  processSteps: PropTypes.array.isRequired,
  children: PropTypes.element  //children是一个保留属性，表示子组件，type是element
};

代码因为比较老，可以优化一下，换成typescript，可以更好的做类型检查

type Props = {   //替换类型检查
  currentStatus: String;
  processSteps: Array<any>;
  children?: ReactElement<any>; 
};
export default class ProcessFlow extends React.PureComponent<Props, {}>{
  state = {};

  checkCurrentStepNum = () => {
  };

  render() {
    const currentStepIndex = this.checkCurrentStepNum();
    return (
      <section className='po-block'>
        <div className='container-fluid'>
          <br />
          <br />
          <ul className='list-unstyled multi-steps'>
            {this.props.processSteps.map((item, index) => (
              <li
                className={classnames({
                  'is-active':
                    index >= currentStepIndex &&
                    currentStepIndex !== this.props.processSteps.length - 1,
                  current:
                    index === currentStepIndex &&
                    currentStepIndex !== this.props.processSteps.length - 1
                })}
                key={item.step}
                title={
                  index === currentStepIndex &&
                  currentStepIndex !== this.props.processSteps.length - 1
                    ? 'Process is running'
                    : ''
                }
              >
                {item.step}
                {this.props.children} //引入子组件
              </li>
            ))}
          </ul>
        </div>
      </section>
    );
  }
}

第一种改法改完

2. 试试继承？

参照react的官方文档

所以这个情况不是用继承修改的场景，当然也可以强行修改，把step判断的逻辑包到class里，ui部分分成两个组件

每天只看一页书，每天只多思考一个点