ReactJS TypeScript渲染道具隐藏参数

Question

如果没有将特定道具设置为渲染道具的组件，我如何禁用对render prop中注入参数的访问。

interface Test {
test: string
}
interface ComponentProps {
someProp?: Test,
children: (params: {param1: boolean, param2: string}) => ReactElement
}
const Component = ({someProp, children}: ComponentProps) => {
return children({
param1: false,
param2: 'test'
})
}

这里介绍了如何在没有向组件提供someProp的情况下使用TypeScript禁用param2。这应该是无效的：

const instance = <Component>
{
({param1, param2}) => <div>{param2}</div>
}
</Component>

有效的：

// someProp is not set, so I can not use param2
<Component>
{
({param1}) => <div>static text</div>
}
</Component>

// someProp is set, so I can use param2
<Component someProp={{test: 'demo'}}>
{
({param1, param2}) => <div>{param2}</div>
}
</Component>

我想有条件地从类型中排除param2，而不是从值中排除

Answer 1

如果我正确理解问题，你可以有条件地呈现孩子们：

const Component = ({someProp, children}: ComponentProps) => {
return !!someProp ? children({
param1: false
}) : children({
param1: false,
param2: 'test'
})
}