从react自定义钩子返回组件的替代方法是什么?

Question

我遇到了一种情况，我需要从自定义钩子返回2个react组件。为了给您简要介绍一下，我有一个自定义钩子，其中汇集了所有必需的状态。在自定义钩子中，我还将这两个组件存储在变量中，并向下传递从另一个自定义钩子返回的props。我在自定义钩子中返回2个组件。一些开发者说在自定义钩子中返回react组件是不好的。所以我在寻找另一种选择。下面是代码演示。

import FirtComponent from '/'
import SecondComponent from "/"
const useCustomHook =()=> {

const {props} =usePropsHook()

const {firstComponentProps,secondComponentProps} =props
return {firstComponent :<FirstComponent {...firstComponentProps}>,secondComponent :<SecondComponent {...secondCOmponentProps} />} 


}

我这样做是为了在我想要的任何地方显示这两个组件的灵活性。比如它们彼此相邻，firstComponent在上面，第二个组件在下面。FirstComponent放在其他模态之类的东西旁边。

Answer 1

为什么不创建一个新的组件，并根据一个道具渲染Component1或Component2?

import FirstComponent from '/'
import SecondComponent from "/"
const MyComponent = ({myCustomProp}) => {

const { props } = usePropsHook()
const { firstComponentProps, secondComponentProps } =props
if (myCustomProp) return <FirstComponent {...firstComponentProps} />
return <SecondComponent {...secondComponentProps} />
}

然后你可以像

那样使用这个组件

<MyComponent myCustomProp />    // render FirstComponent
<MyComponent />                 // render SecondComponent