React中基于可选prop的多内联样式属性赋值简化写法咨询

原写法正确性判断 #

原写法存在逻辑缺陷，不能完全满足需求：

• 当未传入width、或传入的width≤50时，你给width/height/lineHeight赋值了空字符串，内联样式的空值优先级高于CSS类样式，会覆盖类中定义的默认值，不符合「未传入参数使用类默认值」的要求。
• 重复三次执行相同的条件判断，代码冗余，后续修改条件时需要同步改三处，可维护性差。

更简洁的实现方案 #

你可以提前做一次条件判断，仅当符合要求时才传入对应的内联样式属性，不符合时不传递这些属性，就不会覆盖CSS类的默认值：

interface ICircleProps {
  width?: number
}

function Circle(props: ICircleProps) {
  const { width } = props
  const enableCustomSize = !!width && width > 50

  return (
    <div 
      className="defaultClassName"
      style={enableCustomSize ? {
        width,
        height: width,
        lineHeight: `${width}px`
      } : undefined}
    >
      Circle
    </div>
  )
}

如果你的项目支持ES2020+语法，还可以用可选链进一步简化判断条件：

const enableCustomSize = props.width?.valueOf() > 50

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