React条件渲染组件类型

Question

我有一个名为Visible的组件，它有两个道具:condition和children流程是，如果条件为真，组件将返回子(s)，如果不是，它将返回null(就像条件渲染)，但VScode不能识别条件正在做什么，并为子(变量可能为null)抛出错误

是否有一种方法来定义这个组件返回的类型，VScode识别条件检查变量?

Visible.ts:

interface IVisible {
condition: any
children: React.ReactNode
}
function Visible(props: IVisible) : React.ReactNode {
const {condition, children} = props
if( !(!!condition) ) return null;

return <Fragment>{children}</Fragment>
}

使用例:

const [banana, setBanana] = useState<undefined|string[]>(["foo","bar"])
return (
<Visible condition={banana}>
<ul>
{banana.map(e => <li key={e}>{e}</li>) }
</ul>
</Visible>
)

Answer 1

试试这个!声明返回类型为JSX。元素

interface IVisible {
condition: boolean;
children: React.ReactNode;
}
const Visible = ({ condition, children }: IVisible): JSX.Element =>
condition ? <Fragment>{children}</Fragment> : null;

但我仍然建议使用条件渲染。

我不明白为什么要做一个组件，当有一个已经实现的机会。

当有额外的计算或一些其他的特性，那么是的，你可以做一个组件。

但是当你只需要通过一个简单的条件来渲染一个组件时，在我看来，你不应该为此制作一个额外的组件。

const [banana, setBanana] = useState<string[]>(['foo', 'bar']);
return (
<div>
banana.length > 0 && (
<ul>
{banana.map(e => (
<li key={e}>{e}</li>
))}
</ul>
)
</div>
);