ReactJS:三元运算符内部的映射函数

condition ? exprIfTrue : exprIfFalse

import React from 'react';

const ProductList = ({ products, isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? (
        <ul>
          {products.map((product) => (
            <li key={product.id}>{product.name} - ${product.price}</li>
          ))}
        </ul>
      ) : (
        <p>Please log in to view the product list.</p>
      )}
    </div>
  );
};

export default ProductList;

{products.map((product) => (
  <li key={product.id}>{product.name} - ${product.price}</li>
))}

const renderProductList = () => (
  <ul>
    {products.map((product) => (
      <li key={product.id}>{product.name} - ${product.price}</li>
    ))}
  </ul>
);

const renderLoginPrompt = () => <p>Please log in to view the product list.</p>;

return (
  <div>
    {isLoggedIn ? renderProductList() : renderLoginPrompt()}
  </div>
);