如何将节点作为道具传递给 React 中的组件？

Question

试图将逻辑与设计分开。

以下是我要解决的问题的简化版本。

import React, { ReactNode } from "react"

interface ChildProps {
  id: string
}

const Child = function (props: ChildProps) {
  return <div id={props.id} />
}

interface ParentProps {
  id: string
  node: ReactNode
}

const Parent = function (props: ParentProps) {
  return <props.node id={props.id} /> // Throws "JSX element type 'props.node' does not have any construct or call signatures.ts(2604)" error
}

Answer 1

ReactNode 是一种用于渲染 JSX 的类型，因此您希望将您的 prop 键入为功能组件，

interface TestProps {
  node: React.FC
}

然后应该像你期望的那样工作：Playground

---

将 JSX 组件呈现为 title-case JSX 标记也是一个很好的最佳实践。这在更复杂的组件中更容易阅读。这使得它类似于：

const Test = function (props: TestProps) {
    const Node = props.node
    return <Node />
}

---

如果您要接受的组件采用id 属性，您可以在node 的props 类型中指定它。

interface TestProps {
    node: React.FC<{ id: number }>
}

现在您可以像分配任何其他道具一样分配道具：

const Test = function(props: TestProps) {
    const Node = props.node
    return <Node id={123} />
}

Playground

---

最后，您可以疯狂地使用泛型并推断 node 的道具类型，并让包装器组件接受节点接受的所有道具，无论它们是什么。

interface TestProps<P> {
    node: React.FC<P>
    nodeProps: P
}

const Test = function<P>({ node: Node, nodeProps }: TestProps<P>) {
    return <Node {...nodeProps} />
}

Playground

这在学术上很有趣，但与仅通过渲染的 JSX 进行渲染并没有太大区别。