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

如何利用父组件中声明的源类型（全名），而在子组件中声明了prop

e、 g

---

您是否考虑过使用

源代码：node

？节点将是propType。 或者更好的是，您可以按如下说明多种类型：

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

---

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

接口组件支柱{
资料来源：T
}
函数ChildComponent（道具：ChildComponentProps）{
返回(
...
)
}

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

接口AppProps{
//你的应用程序的道具
}
键入FullNameProps={
名称：字符串；
最后：字符串；
}
常量应用程序：React.FC=（道具）=>{
const fullName:FullNameProps={
姓名：“约翰”，
最后：“Doe”，
}
返回(
)
}

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

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

接口AppProps{
//你的应用程序的道具
}
键入FullNameProps={
名称：字符串；
最后：字符串；
}
常量应用程序：React.FC=（道具）=>{
const fullName:FullNameProps={
姓名：“约翰”，
最后：“Doe”，
}
const renderItem=（项目：FullNameProps）=>{
返回(
{item.name}{item.last}
)
}
返回(
)
}
接口组件支柱{
资料来源：T
renderItem：（item:T）=>JSX.Element
}
函数ChildComponent（道具：ChildComponentProps）{
返回(
{props.renderItem（props.source）}
)
}

---

希望有帮助

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

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

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