组合式组件

一、认识

---

二、语法

App.tsx : 使用 HelloDialog 组件

import HelloDialog from './components/HelloDialog';

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <HelloDialog></HelloDialog>
            </div>
        );
    }
}

export default App;

HelloDialog.tsx : 在 Dialog 的基础上封装，向 Dialog 传递了内容、数据、组件

import React from 'react';
import Dialog from './Dialog';

function HelloDialog(props) {
    const BtnComponent = () => {
        return <button>按钮</button>;
    };
    return (
        <Dialog type="hello" BtnComponent={BtnComponent()}>
            <h3>您好！</h3>
            <p>我是您好组件呦</p>
        </Dialog>
    );
}

export default HelloDialog;

Dialog.tsx

import React from 'react';

function Dialog(props) {
    return (
        <div>
            <h3>类型：{props.type}</h3>
            {props.children}
            {props.BtnComponent}
        </div>
    );
}

export default Dialog;