Reactjs 应避免通过道具传递组件类型

当我编写代码时，我觉得实现以下内容是最方便的，即使我知道

渲染道具也可以做到这一点

const Parent = ({Child1:ComponentTyp<Props1>,Child2:ComponentTyp<Props2>})=>{
     const someProps1:Prop1 = {...};
     const someProps2:Prop2 = {...};

     return (<>
               <Child1 ...someProps1/>
               <SomeOtherComponent></SomeOtherComponent>
               <Child2 ...someProps/>
            </>)
}

const Componenet1 = ()=><Parent Child1={Componenet1_Child1} Child2={Componenet2_Child2} />;
const Componenet2 = ()=><Parent Child1={Componenet2_Child1} Child2={Componenet2_Child2} />;
`Componenet1_Child1` and `Componenet2_Child1` have the same props(Props1).
`Componenet1_Child2` and `Componenet2_Child2` have the same props(Props2).

const Parent=（{Child1:ComponentTyp，Child2:ComponentTyp}）=>{
常量someProps1:Prop1={…}；
常量someProps2:Prop2={…}；
返回(
)
}
常数Componenet1=（）=>；
常数Componenet2=（）=>；
`Componenet1_Child1'和'Componenet2_Child1'具有相同的道具（道具1）。
`Componenet1_Child2'和'Componenet2_Child2'拥有相同的道具（道具2）。

但这似乎并不好。
我应该避免执行上述操作吗？为什么

除了优雅，我找不到真正的原因。
你的方法在某种意义上是“渲染道具”。
与普通的“渲染道具”相比，我认为您的方法的好处是，您可以在作为道具传入的函数中安全地使用挂钩

一个值得考虑的问题，（但它也适用于“渲染道具”），因为它比简单的构词更难理解，所以除非<代码>某些道具依赖于<代码>父< /代码>的状态。最好把它们作为实际的孩子。
const Parent: React.FunctionComponent<{ children: [React.ReactElement, React.ReactElement] }> = (props) => { 
    return <>
        {props.children[0]}
        <SomeOtherComponent/>
        {props.children[1]}
    </>
}

const父对象：React.FunctionComponent=（props）=>{
返回
{props.children[0]}
{props.children[1]}
}

玩代码

你可以考虑阅读的另一个主题是.< /p>你的代码有什么问题？我觉得很好。然而，仅传递子组件所需的道具将使您的代码清晰且易于调试。您的类型似乎有问题。你是说
Child1:ComponentType
？