React 条件渲染组件打字稿

Posted 2023-02-22

【中文标题】React 条件渲染组件打字稿

【英文标题】：React condition rendering component typescript

【发布时间】：2021-12-04 19:37:14

【问题描述】：

我有一个名为 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>
)

【问题讨论】：

如果你的condition 属性是boolean，你会更容易找出问题所在，因为它应该是。然后，您可以考虑如何将该数组转换为布尔值，然后再将其作为道具传递。

【参考方案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>
);

【讨论】：

谢谢，我了解额外的计算和特殊性，但是每个项目都有自己的情况，创建条件渲染组件而不是使用condition ? : null有助于在大型项目中阅读代码（尤其是在大型项目中） ，因此有时您可以为更好、更清晰的代码阅读支付更多费用

@msaba 好的，是的，我同意，这对代码的可读性很有意义。现在，我明白你的意图了。良好的编码和好运:)

@msaba 将类型更改为 JSX.Element 后是否出现错误？

不，我没关系