时间戳

首页 > 解决方案 > 有条件地使用material-ui默认道具

javascript - 有条件地使用material-ui默认道具

问题描述

我StepLabel在材料 ui 中有一个组件。根据传递给父级的道具，我可能想更改iconStepLabel 的道具：

interface Props {
  customClasses?: ClassNameMap;
  customIcon?: ReactNode;
}

const MyStepComponent = (props: Props) => {

  const { customClasses, customIcon } = props

  return (
    <Stepper {...stepperProps}>
      <Step
        icon={
          customIcon
            ? React.cloneElement(customIcon as React.ReactElement, {
                className: customClasses?.stepIcon
              })
            : null
          }
        {...otherStepProps}
      />
    </Stepper>
  )

}

因此，在这种情况下，如果将 acustomIcon传递给MyStepComponent它，它将呈现该图标而不是默认图标，并且如果customClasses也传递了它，它会将其中一些自定义类应用于该图标。伟大的。

但是如果customIcon没有通过，我希望Step组件只使用它的默认图标（这是带有步骤号的蓝色圆圈）。但是，在我的代码中，它不会呈现默认图标，而是呈现null.

如果存在，我如何告诉它Step使用我的customIcon，但如果不存在，则使用默认值？

标签： javascriptreactjstypescriptmaterial-ui

解决方案

如果 customIcon 是真实的，那么第一个 if 将被触发，并且带有自定义图标的组件将被渲染。

 const MyStepComponent = (props: Props) => {

      const { customClasses, customIcon } = props
      
      if (customIcon) {
        return (
            <Stepper {...stepperProps}>
          <Step
            icon={ React.cloneElement(customIcon as React.ReactElement, {
                    className: customClasses?.stepIcon
                  })
              }
            {...otherStepProps}
          />
        </Stepper>
        )
      }

      return (
        <Stepper {...stepperProps}>
          <Step
            icon={defaultIcon}
            {...otherStepProps}
          />
        </Stepper>
      )

    }

推荐阅读