ReactJS:将数据传递到组件以在两个列中呈现

import React, { useState } from 'react';

// 子组件1，用于展示左侧列
const Column1 = (props) => {
  return (
    <div>
      <h2>左侧列</h2>
      <ul>
        {props.data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

// 子组件2，用于展示右侧列
const Column2 = (props) => {
  return (
    <div>
      <h2>右侧列</h2>
      <ul>
        {props.data.map((item) => (
          <li key={item.id}>{item.description}</li>
        ))}
      </ul>
    </div>
  );
};

// 父组件
const App = () => {
  // 定义需要传递给子组件的数据
  const data = [
    { id: 1, name: '项目1', description: '项目1的描述' },
    { id: 2, name: '项目2', description: '项目2的描述' },
    { id: 3, name: '项目3', description: '项目3的描述' },
  ];

  return (
    <div>
      <Column1 data={data} />
      <Column2 data={data} />
    </div>
  );
};

export default App;