React18 06 React中的插槽处理机制

1. 让组件具备更强的拓展性与复用性
   *传递数据值使用属性
   *传递html结构使用插槽
   
2. 如果不需要控制父组件书写结构的准确性来保证子组件的渲染位置，那可以直接使用双标签，在双标签里面书写需要的内容即可~ 如果需要具体准确的渲染，那可以使用具名插槽咯~
   React需要我们自己实现，而Vue已经封装好，直接使用即可~
   
   

import "./css/index.css";
import Dialog from "./components/dialogs";

function App() {
  return (
    <>
      <Dialog content="请务必努力学习React~~" />
      <br />
      <Dialog title="努力提示" content="哈哈哈哈哈~~">
        <button>确定</button>&nbsp;&nbsp;
        <button>取消</button>
      </Dialog>
    </>
  );
}

export default App;

import React from "react";
import PropTypes from "prop-types";
const Dialog = ({ title = "温馨提示", content, children }) => {
  //   将children处理成数组的格式
  children = React.Children.toArray(children);
  return (
    <div style={{ border: "1px solid red", width: "300px", padding: "10px" }}>
      <div
        className="title"
        style={{
          display: "flex",
          justifyContent: "space-between",
          width: "100%",
          borderBottom: "1px solid red",
        }}
      >
        <div className="titleName">{title}</div>
        <div className="icon"> X </div>
      </div>
      <div className="content" style={{ margin: "20px 0" }}>
        {content}
      </div>
      {children.length ? children : null}
    </div>
  );
};
// Dialog.defaultProps = {
//   title: "温馨提示",
// }; //不生效,不知道为啥就是不生效？知道原因的小伙伴可以留言~
Dialog.propTypes = {
  title: PropTypes.string,
  content: PropTypes.string.isRequired,
};

export default Dialog;