初步尝试组件封装

现在我们尝试封装一个简单的Dialog

父组件调用

import React from "react";
import ReactDOM from "react-dom/client";
import Dialog from "./components/Dialog"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <>
        <Dialog title="这是title"  content = "大家出门做好防护" />
        <Dialog>
            <p content = "我们一定好好学react">哈哈哈哈</p>
            <button>确定</button>
            <button>取消</button>
        </Dialog>
    </>
);

子组件

import PropTypes from 'prop-types';
import React from "react";

const Dialog = function Dialog(props){
    let {title,content,children} = props;
    children = React.Children.toArray(children);
    
    return <div  className="dialog-box" style={{ width: 300 }}>
        <div className="header"
            style={{
                display:"flex",
                justifyContent:"space-between",
                alignItems:"center"
            }}
        >
            <div className="title">{title}</div>
            <div>x</div>
        </div>
        <div className="main">{content}</div>
        {children.length > 0 ? <div className="footer">
            {children}
        </div>:null}
    </div>
}

Dialog.defaultProps = {
    title:'温馨提示'
}
Dialog.propTypes = {
    title:PropTypes.string,
    content:PropTypes.string.isRequired
}

export default Dialog;