if/else 函数内的语句用于 react-table

Question

是否可以在迭代中添加 if/else 逻辑，因为我想根据 paymentType 的值添加不同的 class 名称？

这是在react-table中使用的。我不确定语法是什么。

const PaymentTypes = ({ values }) => {
    // Iterate the array and create a badge-like component
    return (
        <>
            {values.map((paymentType, idx) => {
                return (
                    <span key={idx} className="badge badge-secondary">{paymentType}</span>
                );
            })}
        </>
    );
};


columns: [
                   
             {
                  Header: "Payment Type",
                  accessor: "paymentType",
                  // Cell method will provide the cell value; we pass it to render a custom component
                  Cell: ({ cell: { value } }) => <PaymentTypes values={value} />
             }
         ]

Answer 1

您可以使用三元运算符，例如：

const PaymentTypes = ({ values }) => {
    // Iterate the array and create a badge-like component
    return (
        <>
            {values.map((paymentType, idx) => {
                return (
                    <span key={idx} className={paymentType==2?"badge badge-secondary":paymentType==1?"badge badge-primary":"badge badge-n"}>{paymentType}</span>
                );
            })}
        </>
    );
};

if/else 函数内的语句用于 react-table

if/else statements inside a function for react-table

reactjs

react-table