如何使用react根据条件渲染重复的代码？

function App() {
  const condition = true;

  return (
    <div>
      {condition ? <p>This is the first code block.</p> : <p>This is the second code block.</p>}
      {condition && <p>This is the third code block.</p>}
    </div>
  );
}

function App() {
  const data = ['Item 1', 'Item 2', 'Item 3'];
  
  return (
    <div>
      {data.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}

function CodeBlock({ content }) {
  return <p>{content}</p>;
}

function App() {
  const conditions = [true, false, true];

  return (
    <div>
      {conditions.map((condition, index) => (
        <CodeBlock key={index} content={condition ? 'This is the first code block.' : 'This is the second code block.'} />
      ))}
    </div>
  );
}