React类型化的子级语法

Question

我正在尝试理解如何构建一个具有非常特定类型的子组件的react组件，我想使用的语法是：

<Stepper>
    <Stepper.Step>
        Some text/react element child
    </Stepper.Step>
    <Stepper.Step>
        Some other text/element
    </Stepper.Step>
</Stepper>

因此，我写出了这段代码作为起点，但即使在我没有从this.props：Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.输出任何内容的情况下，它也会抛出一个错误。

class Step extends Component {
    constructor(props: any) {
        super(props);
        this.state = {

        };
    }
    render() {
        return (
            <li>{this.props.children}</li>
        );
    }
}
class Stepper extends Component {
    static Step: typeof Step;
    constructor(props: any) {
        super(props);

        this.state = {

        };
    }
    render() {
        return (
            <ul className="stepper">
                {this.props.children}
            </ul>
        );
    }
}

请注意，我知道一些库中提供了此功能，但我并不打算在我正在处理的核心代码库中添加任何新的库。

Answer 1

您当前拥有的是Step类型的声明。实际上，您并没有定义该值

static Step: typeof Step;

应该是这样的。我非常确定TypeScript会推断出该类型

static Step = Step

Answer 2

如果您在Stepper中定义复合组件时删除了中的typeof，并实际执行以下操作：

  static Step = Step;

应该能行得通。您的问题是typeof将返回组件的类型(obj)，而不是实际的组件。我在这里复制了您的代码，并尝试了该更改，它起作用了：

https://codesandbox.io/s/vigilant-thompson-mj1re