Условно отображать элементы на основе данных в функциональном компоненте - PullRequest
Новая
       34

Условно отображать элементы на основе данных в функциональном компоненте

1 голос
/ 09 января 2020

У меня есть функциональный компонент в приложении React, который выполняет вызов API и возвращает ответ с двумя методами контакта Номер телефона и Электронная почта и отображает их рядом с соответствующим значком. .

В некоторых ответах может быть только один или другой метод контакта, или ни того, ни другого.

В случае, если в ответе нет метода контакта, я все еще хочу отобразить значок и разместить '-' где данные будут.

Вот мой первый проход в логи c, где я попытался написать несколько быстрых троичных методов, но сейчас все, что отрисовывается в каждой строке, это [object Object][object Object] 

  let renderContactDetails = methods.map(method => {

    return (
      <div>
        {
          method.contactMethodType === "M" ? `${<span><PhoneSvg /> {method.number}</span>}` : `${<span><PhoneSvg /> -- </span>}`
        }
        {
          method.contactMethodType === "E" ? `${<span><AtSymbolSvg /> {method.emailAddress}</span>}` :  `${<span><AtSymbolSvg /> -- </span>}`
        }
      </div>
    );
  });

Есть предложения?

Ответы [ 3 ]

3 голосов
/ 09 января 2020

Вам нужно только определить JavaScript внутри литералов шаблона и позволить JSX преобразовать теги html для вас следующим образом: 

let renderContactDetails = methods.map(method => {

const number = method.contactMethodType === "M" ? `${method.number}` : `--`;
const email = method.contactMethodType === "E" ? `${method.emailAddress}` : `--`;
    
    return (
      <div>
        <span><PhoneSvg /> {number}</span>
        <span><PhoneSvg /> {email}</span>
      </div>
    );
});
1 голос
/ 09 января 2020

Вам не нужно оборачивать все в строку, то есть ваши компоненты вызывают метод toString(), превращаясь в [object Object]. Попробуйте сделать что-то вроде этого: 

let renderContactDetails = methods.map(method => {

    return (
      <div>
        {
          method.contactMethodType === "M" ? 
            <span><PhoneSvg /> {method.number}</span>} :
            <span><PhoneSvg /> -- </span>
        }
        {
          method.contactMethodType === "E" ?
           <span><AtSymbolSvg /> {method.emailAddress}</span> :
           <span><AtSymbolSvg /> -- </span>
        }
      </div>
    );
  });
1 голос
/ 09 января 2020

Вы перепутали строки шаблона с синтаксисом jsx. Просто сделайте: 

  let renderContactDetails = methods.map(method => {

    return (
      <div>
        {
          method.contactMethodType === "M" ? <span><PhoneSvg /> {method.number}</span> : <span><PhoneSvg /> -- </span>
        }
        {
          method.contactMethodType === "E" ? <span><AtSymbolSvg /> {method.emailAddress}</span> : <span><AtSymbolSvg /> -- </span>
        }
      </div>
    );
  });

, а затем выполните рендеринг. 

return (
   {renderContactDetails}
)
...