react组件封装

封装一个Dialog

import PropTypes from 'prop-types'
import React from 'react'
const Dialog = function Dialog(props) {
    //获取传递的属性，及插槽信息
  const { title, content, children } = props
  //把props.children三种情况（空,一个值，多个值）都变为数组，
  let Children = React.Children.toArray(children)
  return (
    <>
      <div className="dialog-box"  style={{width:'300px'}}>
        <div className="header" style={{display:'flex',alignItems:'center',borderBottom:'1px solid'}}>
          <h2 className="title">{title}</h2>
          <span>x</span>
        </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

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="友情提示" content="大家好啊！" />
    <Dialog content="好好学习React！">
      <button>确定</button>
      <button>很确定</button>
    </Dialog>
  </>
)