Preact.js 如何创建分层组件

Preact.js How to create hierarchical component

我想创建一个组件作为生成 HTML 容器的父组件,以及一些其他组件作为子组件。 例如我有这样的 CardComponent

import { h, Component } from "preact"

    class CardComponent extends Component{
        render(){
            return (
                <div className='card'>

                </div>
            )
        }
    }

假设我们有 ButtonComponent 从 "preact"

导入 { h, 组件}
class ButtonComponent extends Component{
    render(){
        return (
            <button>
              a button
            </button>
        )
    }
}

然后我想这样调用这些组件

<CardComponent>
    <ButtonComponent/>
</CardComponent>

我的 CardComponent 应该做什么?

尝试做:

import { h, Component } from "preact"

    class CardComponent extends Component{
        render(){
            return (
                <div className='card'>
                  {this.props.children}
                </div>
            )
        }
    }