Блог

Я был бы признателен за любую помощь в том, чтобы разобраться в этом. В приведенном ниже коде я хотел бы взять значения между ` из диапазона и присвоить их переменной, чтобы иметь следующую логику:

 ${research.data.codesRelated[1].code} === undefined 
  ? ${research.data.description} 
  : ${research.data.codesRelated[1].code} ${research.data.description}
 

Как я могу это сделать? Это кажется таким простым, но я не мог разобраться в этом, не знаю, где разместить константу и условный рендеринг внутри кода и заставить его работать. Всем заранее.

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

 const Research: FC<ResearchProps> = memo(
  ({ research, hideLabel = false, intl }) => (
    <div className="section research">
       <div className="section__value" id="container-research-value">
        <div className="research-info">
          <div className="description" id="element-research-description">
            <PopoverWrapper
              id="element-research-description-tooltip"
              trigger="hover"
              placement="top"
              speaker={<span className="text-tooltip">{research.data.description}</span>}
            >
              **<span>{`${research.data.codesRelated[1].code} ${research.data.description}`}</span>**
            </PopoverWrapper>
          </div>
 

Вы можете попробовать это

 const Research: FC<ResearchProps> = memo(
  ({ research, hideLabel = false, intl }) => (
    <div className="section research">
       <div className="section__value" id="container-research-value">
        <div className="research-info">
          <div className="description" id="element-research-description">
            <PopoverWrapper
              id="element-research-description-tooltip"
              trigger="hover"
              placement="top"
              speaker={<span className="text-tooltip">{research.data.description}</span>}
            >
              <span>{research.data.codesRelated[1].code === undefined ?
                        research.data.description
                      : <>
                       {research.data.codesRelated[1].code} {research.data.description}
                      </>}
              </span>
            </PopoverWrapper>
          </div> 

Как уже упоминалось, вы можете использовать тернарный оператор.

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

 <span>
{research.data.codesRelated[1].code amp;amp; `${research.data.codesRelated[1].code} `}
{`${research.data.description}`}
</span>
 

Но лучший способ создать внешнюю функцию для построения этой строки. И ваш рендеринг будет таким:

 <span>
{buildResearchDescription(research.data)}
</span>