实用问题解决之React+umi+antd（2）

1、如何通过state完成路由携带参数的跳转动作？

场景：从A页面跳转至B页面，同时将A页面的参数a带入B页面进行使用。若B页面为详情功能的页面，那么采用 query 将参数显示在url里并无问题；但如果A和B属于同级功能，肯定就不希望路由后面跟着具体参数。我用到的是state传参：

state传参的实际意义其实和history.state是一样的。（可以通过打印两个参数进行对比）

除了通过 props.location.state 取值外，还需考虑值是否需要保留。

/* A页面 */
<Link
	style={{ cursor: 'pointer' }}
	to={{
		pathname: '/order',
		state: {
			id: record.id,
			orderDate: record.date
		}
	}}
	>
	{ record.id }
</Link>

/* B页面 */
useEffect(() => {
    if (props.location.state) {
      if (props.location.state.id) {
        formRef.current.setFieldsValue({
          id: props.location.state.id || '',
          startTime: props.location.state.orderDate,
          endTime: props.location.state.orderDate
        });
      }
      actionRef.current?.reload(true);
      props.history.replace('/order', null); // *清除state*
    }
}, [props.location.state]);

父组件传递的props里，location就是从history.location取的数据源。所以此时刷新页面，state仍会保留。
当我们不需要保留时，通过 history.replace 回退参数值。——以此实现从A到B的一次性隐性传值。

2、antd的TimePicker组件如何实现失焦即选择？

场景：在选择时间区间的交互操作中，每次选择时间都需要点击确定。对于多个时间区间选择的页面而言，这是个很繁复的操作。首先要明确，我使用的组件库是4.x版本。

从组件本身开始调研，我们发现在5.14.0版本后，TimePicker组件就能通过needConfirm属性控制是否需要[确定]按钮。

但是从4.x升级到5.x是需要谨慎考虑的。升级后会因为引入了5.x版本改变的弃用less等更新内容而出现大量报错。
目前暂未找到除升级外的其他方法，未来将考虑引入另外第三方组件。

3、使用proTable列固定时，初始打开页面无阴影效果

场景：列表页最右侧列为固定列，在这种情况下，通常都会以box-shadow的css样式作为强调区分。但是初始打开页面却并无阴影效果，必须滚动才会生效。

经过排查发现，横向滚动时ant-table会出现三种class形式：
1）初始：(ant-table-fixed-header ant-table-has-fix-right)
2）未滚动完：ant-table-ping-left ant-table-ping-right (ant-table-has-fix-right)
3）滚动到底：ant-table-ping-left ant-table-fixed-header (ant-table-has-fix-right)
而box-shadow真正定义只有 ant-table-ping-right

具体class变化规则要看组件库源码。
目前我发现可以通过设置 scroll={{ x: 'max-content' }} 解决初始状态没有 ant-table-ping-right 类名问题。

<ProTable<ColumnType>
    formRef={formRef}
    columns={columns}
    actionRef={actionRef}
    scroll={{ x: 'max-content' }}
/>

总结

待续。