如何在react中为动态组件拥有不同的props

Question

我正在创建一个反应组件，它需要在服务器和客户端上有不同的父组件。

const Router = runtime.isServerSide ? Server : Client;

<Router>
  <Child />
</Router>

服务器组件采用与客户端组件不同的 props。

我使用条件渲染来解决这个问题，但我希望能够在 Router 的声明中指定 props

{runtime.isServerSide ? (
  <Server serverProp={123}>
    <Child />
  </Server
) : (
  <Client clientProp={false}>
    <Child>
  </Client>
)}

Answer 1

React 组件本质上是一个函数。在打字稿中，当您有一个键入为函数联合的变量并尝试使用它时，它本质上成为一个函数，其参数键入为函数联合的所有成员的参数的交集。通过一个简单的例子就可以很容易地观察到这一点：

const fnNumber = (v:number)=>{}
const fnString = (v:string)=>{}

const fnStringOrNumber = [fnNumber, fnString][0]

fnStringOrNumber() // v: never

此处，

fnStringOrNumber

需要一个

never

类型的参数。

因此，在您的情况下，您不能依赖条件表达式来为您解决好的道具。如果你想更多地了解这方面，你可以看看 Typescript union type of function oddly gets an intersection type of the argument。

但一般来说，在 React 中，您可能只想拥有另一种类型来表示路由器的 props，而不是显式创建，并且在

Router

组件中，您可以选择将哪些 props 传递给哪个组件。

例如可以做这样的事情

type RouterProps = {
  serverProps: ComponentProps<typeof Server>;
  clientProps: ComponentProps<typeof Client>;
};

const Router = (props: RouterProps) => {
  if (isServerSide()) {
    return <Server {...props.serverProps} />;
  }
  if (!isServerSide()) {
    return <Client {...props.clientProps} />;
  }
  return null;
};

然后你明确地将正确的 props 传递给需要它们的组件。这是一点额外的工作，但不多，应该没问题。您可以使用

ComponentProps

类型从组件中获取 props，这样更容易。

这里有一个指向 typescript Playground 的链接，可能会有所帮助。

干杯。