Один компонент в каждом представлении, но с другим className - PullRequest
0 голосов
/ 05 октября 2018

Итак, у меня есть индикатор выполнения для моего приложения, который я должен поместить в каждый другой компонент с другим именем класса, чтобы изменить цвет и показать ход процесса.

        <ol>
          <li className="complete" data-step="1">
          </li>
          <li className="active" data-step="2">
          </li>
          <li data-step="3">
          </li>
        </ol>

Есть ли более правильный способ предотвратить копирование панели в каждом компоненте и просто изменить имена классов в зависимости от компонента, в котором он находится?

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Я бы сделал что-то вроде этого:

const completedStep = 2; // 1, 2, 3 (0 == nothing is completed)
const steps = ['Step 1', 'Step 2', 'Step 3']; // can be whole component, not just a string

return (
   <ol>
     {steps.map((step, index) => {
        return (
           let className;

           if (index < completedStep) {
              className = 'completed';
           } else if (index === completedStep) {
              className = 'active';
           } else {
              className = '';
           }

           <li
             key={index}
             data-step={index + 1}
             className={className}
           >
              {step}  
           </li>
        );
     })}
   </ol>
);

Приведенные выше параметры можно передать как реквизиты для компонента.

0 голосов
/ 05 октября 2018

Вы можете просто сделать условный рендеринг

Пример:

    <ol>
      <li className={condition ? "active" : "complete"} data-step="1">
      </li>
      <li className={condition ? "active" : "complete"} data-step="2">
      </li>
      <li data-step="3">
      </li>
    </ol>
...