代码之家 › 专栏 › 技术社区 › Calcimicium

react typescript防止元素具有意外类型的子级

typescript reactjs

Calcimicium · 技术社区 · 6 年前

我想防止一个反应组件至少有(一个或多个)特定类型的子组件。

此脚本可以工作,但它允许组件具有其他类型的子级,但原始子级除外:

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 试试看。

谢谢