Блог

Я хочу реорганизовать код для оператора switch с помощью react?

Я должен перечислять сообщения для элементов на основе их типа, например «создано», «удалено», «обновлено», «прокомментировано». Для этого я использую оператор switch. Теперь, если для элемента списка есть переполнение, я добавляю кнопку расширения. Для этого я создал расширяемый компонент, который является общим для всех элементов списка.

Код приведен ниже,

 switch (list.type) {
        case 'created': {
            return (
                <Expandable base_height={50}>
                    <List
                        icon={<Svg/>}
                        text={<Text text={' created '} mname={model} 
                        additional_text={some_text}/>}/>
                </Expandable>
            );
         }
         case 'deleted': {
            return (
                <Expandable base_height={50}>
                    <List
                        icon={<Svg/>}
                        text={<Text text={' deleted '} mname={model} 
                        additional_text={some1_text}/>}/>
                </Expandable> 
            );
         }
         case 'udpated':
         {/*ssooooooooooooo on ''''''''''''*/}
         default:
             return null;
 }
  

Приведенный выше код работает. Как вы видите из приведенного выше кода, расширяемый компонент будет повторяться для каждого случая, как я могу поместить его вне каждого случая, чтобы мне не приходилось повторять один и тот же код для каждого случая? Спасибо.

Для каждого динамического значения можно создать переменную и просто обновить значения в соответствующем операторе case. В конце используйте эти переменные и верните JSX.

Вот так:

 let text = '', mname = '', additional_text='';
switch (list.type) {
    case 'created': {
        text = 'created';
        mname = model;
        additional_text = some_text;
        break;
     }
    case 'deleted': {
        text = 'deleted';
        mname = model;
        additional_text = some1_text;
        break;
     }
    case 'udpated':
        {/*ssooooooooooooo on ''''''''''''*/}
    default:
         return null;
}

return (
    <Expandable base_height={50}>
        <List
            icon={<Svg/>}
            text={<Text text={text} mname={mname} 
            additional_text={additional_text} />}/>
    </Expandable>
);