如何简化TextField组件中重复的errors.map错误提示渲染代码？

有两种常用的简化方案，可根据实际场景选择： #

方案1：抽离公共错误渲染工具函数（快速适用，不需要改动组件结构） #

把重复的错误列表渲染逻辑抽成独立的工具函数，需要用的地方直接调用即可：

// 抽离的公共函数，可以放在公共utils文件里全局复用
const renderErrorList = (errors) => {
  if (!errors?.length) return false
  return (
    <ul>
      {errors.map((err, index) => <li key={index}>{err}</li>)}
    </ul>
  )
}

使用时直接替换原来的重复逻辑即可：

<TextField
  label="Password"          
  error={renderErrorList(errors)}
  helperText={errors}
/>

<TextField
  type="password"
  id="standard2"
  value={confirmPassword}
  error={renderErrorList(errors)}
  helperText={errors}
/>

方案2：封装自定义TextField组件（更适合多场景全局复用，维护性更高） #

如果后续大量输入框都需要这个错误逻辑，直接封装一个自带错误处理的自定义TextField，所有原有属性直接透传：

// 封装的自定义组件，可放在公共组件库全局调用
const ValidatedTextField = ({ errors, ...restProps }) => {
  const errorNode = errors?.length ? (
    <ul>
      {errors.map((err, index) => <li key={index}>{err}</li>)}
    </ul>
  ) : false

  return <TextField error={errorNode} helperText={errors} {...restProps} />
}

使用时不需要再写任何错误相关的重复逻辑，传errors属性即可：

<ValidatedTextField
  label="Password"          
  errors={errors}
/>

<ValidatedTextField
  type="password"
  id="standard2"
  value={confirmPassword}
  errors={errors}
/>

如果你的TextField组件原生error属性仅接收布尔值（比如MUI的原生TextField），可以调整组件逻辑，把错误列表放到helperText属性里，逻辑是通用的。

内容的提问来源于stack exchange，提问作者JS3