React 条件渲染组件打字稿

Question

我有一个名为 Visible 的组件，它有两个道具：条件和孩子 流程是，如果条件为真，组件将返回子项，如果不是，它将返回 null（就像条件渲染一样），但 VScode 无法识别条件正在做什么并为子项抛出错误（变量可能为空）

有没有办法为这个组件定义一个类型返回 VScode 识别条件检查变量？

可见.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.Element

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>
);