react插槽

// 子组件 UserModal.jsx
const UserModal = ({ contentSlot, onConfirm }) => {
  // 子组件内部数据
  const user = { name: '张三', age: 25 };
  
  return (
    <div className="modal">
      {/* 子组件调用 contentSlot 函数，并传入内部数据 user */}
      {contentSlot(user)} 
      <button onClick={onConfirm}>确认</button>
    </div>
  );
};

// 父组件使用
const Parent = () => {
  return (
    <UserModal
      // 父组件传递一个函数作为“插槽”，参数就是子组件传来的数据
      contentSlot={(user) => (
        // 用子组件的数据渲染内容
        <div>
          <p>姓名：{user.name}</p>
          <p>年龄：{user.age}</p>
        </div>
      )}
      onConfirm={() => {}}
    />
  );
};

子组件通过调用 contentSlot(user) 把内部数据传递出去
父组件通过定义函数 (user) => {...} 接收数据
父组件在函数里用 user 渲染内容
React 没有专门语法，直接用 “函数传参” 这种更原生的方式，反而不像 “插槽”