Question

我想防止具有至少（一个或多个）特定类型子代的反应成分。

此脚本有效，但是它允许组件具有其他类型的子代，但原始子代除外：

import * as React    from "react"

class App extends React.Component {
    render() {
        return <div>
            {/* Should compile, it does: OK! */}
            <Foo><Bar lorem={0} /></Foo>

            {/* Should compile, it does: OK! */}
            <Foo>
                <Bar lorem={1} />
                <Bar lorem={2} />
            </Foo>

            {/* Should not compile, it does not: OK! */}
            <Foo />

            {/* Should not compile, it does: NOT OK... */}
            <Foo><div /></Foo>

            {/* Should not compile, it does: NOT OK... */}
            <Foo>
                <div />
                <div />
            </Foo>
        </div>
    }
}

class Foo extends React.Component<FooProps> {
  render() {
    return <ul>{this.props.children}</ul>
  }
}

interface FooProps {
    children: React.ReactElement<BarProps> | React.ReactElement<BarProps>[]
}

class Bar extends React.Component<BarProps> {
    render() {
        return <li>{this.props.lorem}</li>
    }
}

interface BarProps {
    lorem: number
}

我的代码有问题吗？

您可以下载一个Git短项目here来尝试。

谢谢

Answer 1

根据文档，您无法从JSX.Element检索类型信息

The JSX result type
默认情况下，JSX表达式的结果键入为any。您可以通过指定JSX.Element接口来自定义类型。但是，无法从此接口检索有关JSX的元素，属性或子级的类型信息。这是一个黑匣子。

例如，通过覆盖children类型定义，您可以将类型限制为string或单个JSX.Element，任何自定义组件都将“投射”到JSX.Element及其类型不可访问。

The JSX result type

React TypeScript防止元素具有意外类型的子元素

1 个答案: