如何在reactjs children中提及可选参数答案

【问题标题】：How to mention the optional parameters in reactjs children如何在reactjs children中提及可选参数
【发布时间】：2022-12-05 07:06:09
【问题描述】：

我正在将 reactjs + typescript 用于 React 应用程序。

我有一个名为 <Video> 的父组件，如下所示：

<Video
  param1={param1}
  param2={param2}
  param3={param3}
/>

Inside Video component, there is a child component, the <VideoControls/>

<VideoControls
   param1={param1}
   param2={param2}
   param3={param3}
/>

从page1我用Param1 and Param2调用<Video Param1={param1} Param2={param2} />，所以我有一个类型：

type props {
  param1: string,
  param2: string,
  param3?: string,
}

从page2我用所有参数调用<Video Param1={param1} Param2={param2} Param3={param3} />。

但是当涉及到子组件<VideoControls />时，我不知道如何传递参数，因为有时它是所有 3 个参数，有时它只是其中的 2 个。

我是否应该传递所有 3 个参数，当它来自 page1 时，param3 将传递 undefined ？

有那个案子的文件吗？

【问题讨论】：

“我是否应该传递所有 3 个参数，当它来自 page1 时，param3 将传递undefined？“ - 是的，这很有效。

标签： javascript reactjs

【解决方案1】：

您应该将所有 props 从父组件传递到子组件，即使某些 props 是可选的。这将确保所有的道具都可用于子组件，并且子组件可以选择使用哪些道具。

一种方法是使用 ... 传播运算符。这将自动包含视频组件中的所有道具，包括可能未提供的任何可选道具。例如：

const Video: React.FC<Props> = (props) => {
  return (
    <>
      <VideoControls {...props} />
    </>
  );
}

然后，在VideoControls 中，根据道具是否可用，决定您要如何处理这些道具。

【讨论】：