typescript 如何在React中将节点作为 prop 传递给组件？

bvn4nwqk 于 2023-02-25 发布在 TypeScript

关注(0)|答案(1)|浏览(184)

试图把逻辑和设计分开。
下面是我试图解决的问题的简化版本。

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
}

typescript

来源：https://stackoverflow.com/questions/63162409/how-to-pass-node-as-prop-to-component-in-react

1条答案

按热度按时间

zwghvu4y1#

ReactNode是用于呈现JSX的类型，因此您希望将prop作为功能组件键入，

interface TestProps {
  node: React.FC
}

它应该会像您预期的那样工作：Playground
将JSX组件呈现为一个标题大写的JSX标记也是一个很好的最佳实践。这在更复杂的组件中更容易阅读。

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

如果你想接受的组件有id属性，你可以在node的props类型中指定它。

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

现在，您可以像指定任何其他 prop 一样指定该 prop ：

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

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

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

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

Playground
这在学术上很有趣，但与在renderedJSX中传递渲染没有太大区别。

赞(0）回复(0）举报 2023-02-25

我来回答

typescript 如何在React中将节点作为 prop 传递给组件？

1条答案

相关问题

热门标签

最新问答