在React中实现Vue的插槽功能的示例代码

// components/Layout.jsx
import React from 'react';

function Layout({ header, content, footer }) {
  return (
    <div className="layout">
      <header className="layout-header">{header}</header>
      <main className="layout-content">{content}</main>
      <footer className="layout-footer">{footer}</footer>
    </div>
  );
}

export default Layout;

// App.jsx
import React from 'react';
import Layout from './components/Layout';

function App() {
  return (
    <Layout
      header={<h1>网站标题</h1>}
      content={<p>这是网站的主要内容。</p>}
      footer={<small>版权所有 © 2024</small>}
    />
  );
}

export default App;

// components/List.jsx
import React from 'react';

function List({ items, renderItem }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{renderItem(item, index)}</li>
      ))}
    </ul>
  );
}

export default List;

// App.jsx
import React from 'react';
import List from './components/List';

function App() {
  const items = [
    { id: 1, name: '苹果', price: 5 },
    { id: 2, name: '香蕉', price: 3 },
    { id: 3, name: '橙子', price: 4 },
  ];

  const renderItem = (item, index) => {
    return (
      <div>
        {index + 1}. {item.name} - 价格: {item.price}元
        {item.price > 4 && <span style={{ color: 'red' }}> (贵)</span>}
      </div>
    );
  };

  return (
    <div>
      <h1>商品列表</h1>
      <List items={items} renderItem={renderItem} />
    </div>
  );
}

export default App;

// components/Card.jsx
import React from 'react';

function Card({ header, content, actions, renderFooter }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-content">{content}</div>
      <div className="card-actions">{actions}</div>
      <div className="card-footer">{renderFooter && renderFooter()}</div>
    </div>
  );
}

export default Card;

// App.jsx
import React from 'react';
import Card from './components/Card';

function App() {
  const user = {
    name: '张三',
    age: 30,
    email: 'zhangsan@example.com',
  };

  const renderFooter = () => {
    return (
      <p>
        用户信息：{user.name}，{user.age}岁，邮箱：{user.email}
      </p>
    );
  };

  return (
    <Card
      header={<h2>用户信息</h2>}
      content={<p>这是用户的详细信息。</p>}
      actions={
        <button onClick={() => alert('编辑')}>编辑</button>
      }
      renderFooter={renderFooter}
    />
  );
}

export default App;