Reactjs 对象作为React子对象无效（找到：具有键{children}的对象）

我读过一篇有趣的文章，其中建议使用自定义的usechildProps挂钩直接在父级中编写动态元素，而不是发送道具。文章如下：

基本上，不是写：

---

正如错误所述，您正试图使用对象作为react组件（

childProp.title

，和

childProp.content

）。似乎你想用他们的孩子作为“内容”

从“react”导入{usemo}；
const useChildProps=（儿童，白名单）=>{
返回UseMoom（（）=>
[].concat（儿童）。减少(
（儿童道具，儿童）=>{
if（白名单&！白名单.includes（child.type））{
抛出错误（`element不受支持`）；
}
childProps[child.type]=child.props；
归还儿童道具；
},
{}//最好将其设置为对象，而不是将属性修补到其中的数组
);
};
导出默认useChildProps；

从“/useChildProps”导入useChildProps；
const ModalFromTheFuture=（{children}）=>{
const childProps=useChildProps（儿童[
“头衔”，
“内容”，
“操作按钮”，
“取消按钮”
]);
console.log（childProps）；
删除childProps.actionButton.children；
删除childProps.cancelButton.children；
返回(
{childProps.title&&{childProps.title.children}
{childProps.contents&&childProps.contents.children}

{childProps.actionButton&&}
{childProps.dismissButton&&}
);
};

您在哪里使用

useChildProps

？问题已更新，并带有沙盒。问题似乎来自childProps[child.type]=child.props；行中的useChildProp钩子；。如果我用字符串替换child.props，它会工作。

childProps.title

是一个对象。感谢沙盒，这使调试变得更容易。这是一种奇怪的设计模式。我不明白为什么你不能用“正常”的方式使用子元素，并创建一个接受JSX元素子元素的模态元素，而不是使用像dismissButton这样的不存在的psuedo元素。错误元素可能会产生巨大的未捕获错误，而eslint不知道允许哪些元素。