将道具类型传递给可重用组件答案

【问题标题】：Passing types of props to reusable component将道具类型传递给可重用组件
【发布时间】：2020-02-12 17:56:37
【问题描述】：

如何利用在子组件中声明 prop 的父组件中声明的源类型 (fullName)？

例如

type fullNameProps = {
   name: string;
   last: string;
}

const App = () => {
   const fullName: fullNameProps = {
     name: "John",
     last: "Doe",
   } 

   return <ChildComponent source={fullName} />

};

如何在 App Component 中声明的 ChildComponent 中使用 source 的类型？ source 对象可能会有所不同，因为 ChildComponent 是可重用的组件。有没有办法可以为此使用泛型？

const ChildComponent = ({ source }: { source ??? }) => {};

【问题讨论】：

标签： javascript reactjs typescript types react-props

【解决方案1】：

您是否考虑过使用source: node？节点将是 propType。或者更好的是，您可以按如下方式考虑多种类型：

  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

【讨论】：

感谢@bnjmn.myers 的建议我的例子比真实案例简单得多。我正在尝试使用 Typescript Generics 找到解决方案。我相信它一定有办法解决这个问题，但我不太明白。
你尝试过 PropTypes.node 吗？
另外，我刚刚发现了这个... PropTypes.any
使用 PropTypes.any 相当于将我的 typescript 类型签名为 any。

【解决方案2】：

也许首先我们必须将 ChildComponent 转换为 generic 组件。它看起来像这样：


interface ChildComponentProps<T = unknown> {
    source: T
}

function ChildComponent<T extends any>(props: ChildComponentProps<T>) {
    return (
    <div>...</div>
    )
}

现在，我们通过为其源提供类型来使用此组件。像这样的：


interface AppProps {
// your app's props
}

type FullNameProps = {
    name: string;
    last: string;
}

const App: React.FC<AppProps> = (props) => {
    const fullName: FullNameProps = {
        name: "John",
        last: "Doe",
    }

    return (
        <div>
            <ChildComponent<FullNameProps>
                source={fullName}
            />
        </div>
    )
}

这应该可以完成工作。另外，建议为您的子组件提供一个渲染方法来渲染源中传递的值。

包含渲染功能的整个示例：


interface AppProps {
// your app's props
}

type FullNameProps = {
    name: string;
    last: string;
}

const App: React.FC<AppProps> = (props) => {

    const fullName: FullNameProps = {
        name: "John",
        last: "Doe",
    }

    const renderItem = (item: FullNameProps) => {
        return (
            <h1>
                {item.name} {item.last}
            </h1>
        )
    }

    return (
        <div>
            <ChildComponent<FullNameProps>
                source={fullName}
                renderItem={renderItem}
            />
        </div>
    )
}


interface ChildComponentProps<T = unknown> {
    source: T
    renderItem: (item: T) => JSX.Element
}

function ChildComponent<T extends any>(props: ChildComponentProps<T>) {
    return (
        <div>
            {props.renderItem(props.source)}
        </div>
    )
}

希望对你有帮助！

【讨论】：