仅当属性未定义时才将其传递给“Image”

Question

我正在使用 MDX 和 NextJS 构建一个博客网站。我正在定义一个自定义图像组件，它将使用 Next

<Image>

组件。我遇到的问题相对较小，但我一直在努力寻找答案。

基本问题是：如果我有一个变量

string | undefined

，React 中是否有任何方法可以仅将该变量传递给已定义的可选 prop？我对 React 还很陌生，所以这可能是非常基本的东西。

我需要这个的原因是自定义 MDX 图像组件应该将

ImgHTMLAttributes<HTMLImageElement>

作为 props。所有这些 props 都定义为

someType | undefined

，这是有道理的，因为 HTML 属性是可选的。

我的问题在于将这些道具传递到下一张图片。当可选的

src

、

alt

、

width

和

height

属性在原始图像中定义时，如何传递，而不是在未定义时传递？

我收到的具体错误是

Type 'string | undefined' is not assignable to type 'string | StaticImport'

，这是完全有道理的。

我尝试过这样的事情：

    const src = props.src != undefined ? props.src : "";
    const alt = props.alt != undefined ? props.alt : "";
    const width = props.width != undefined ? props.width : "";
    const height = props.height != undefined ? props.height : "";

这很丑陋，而且也没有真正解决我的问题。例如，当宽度未定义时，我不想传递宽度。

Answer 1

这可能有点混乱，但是您可以有一个函数来处理检查您想要观看的不同道具。在此函数中，如果存在 props，则可以返回 true；如果不存在，则返回 false。然后，您可以根据所述函数的真值进行条件渲染。

const hasProps = propsObject => {
  // if props present, return true
  // otherwise return false
}

// then return something like this
return (
 {hasProps ?
  <Foo
   src={src}
   alt={alt}
   width={width}
   height={height} /> 
 } : 
  <Bar />
)

或者也许您希望能够单独检查每个道具，而不是检查全部道具或不检查任何道具。在这种情况下，我可能会在接收道具的组件中有条件地处理这个问题。 这可能就是我处理这种情况的方式。

<Foo
 src={src ? src : undefined}
 alt={alt ? alt : undefined}
 width={width ? width : undefined}
 height={height ? height : undefined} />

// Handle receiving props in Foo
function Foo(props) {
 const [width, setWidth] = useState(props.width)
 ...
}