Смелый компонент React

Я работаю над базовым индексным приложением для поиска выпускников, используя VulcanJS. Он использует Реакт. Я использую гламурный для укладки. Он действительно чистый и простой в использовании. Он вдохновлен гламуром, еще одним очень популярным решением css в js, созданным потрясающим Безумным ученым Сунил Пай.

Я хотел создать компонент, который просто берет кучу строк, заключает их в выбранный элемент HTML и выделяет их текстовые узлы жирным шрифтом. Это казалось простым, но для этого нужно знать некоторые основы React, в которые я никогда не вникал до сих пор. Забавно, что я просто продолжал использовать его по минимуму. Только сейчас, когда я долго работаю над чем-то своим в React, я начал лучше изучать нюансы React. Хорошо, теперь займемся компонентом.

Ниже приведены строки, которые я хотел обернуть в диапазон, чей fontWeight выделен полужирным шрифтом.

const labelStrings = new Set([
  "Twitter Handle",
  "Facebook Profile",
  "Website",
  "Linkedin ID",
  "Roll No",
  "Branch",
  "Graduating Year",
  "Degree Type",
  "Company Or University",
  "Bio"
])

Обычно предпочтительнее, чтобы вы хранили свои реагирующие компоненты в отдельных модулях/файлах. Но в этом случае, чтобы иметь возможность сделать метод рендеринга чище, я создал пространство имен для хранения всех этих похожих реагирующих компонентов (в основном выделенные полужирным шрифтом интервалы).

const LabelComponents = {}; // namespace

Теперь, поскольку мне нужен диапазон (и его можно сделать более общим, передав тип HTML-элемента в самом реквизите), я оборачиваю его в гламурный компонент более высокого порядка (который просто оборачивает голый тег span с помощью fontWeight), я беру реквизит text для текстового узла диапазона и просто возвращаю стилизованный диапазон. Ничего страшного, все основное.

const BoldSpanComponent = ({text, fontWeight}) => {
  const StyledSpan = glamorous.span({
    fontWeight: fontWeight
  })
  return (
    <StyledSpan>{text}: </StyledSpan>
  )
}

BoldSpanComponent.propTypes = {
  text: PropTypes.string.isRequired,
  fontWeight: PropTypes.string
}

Теперь я переберу набор строк в наборе и верну BoldSpan для каждой из них и заставлю их находиться в компоненте в пространстве имен, например:

for (let label of labelStrings) {
// remove the white spaces in the string
 const noSpaceLabel = label.replace(/\s/g,''); 
  LabelComponents[noSpaceLabel] = () => {
    return <BoldSpanComponent text={label} fontWeight="bold" />
  }
}

вы можете прочитать больше о том, что такое \s в регулярном выражении здесь.

И теперь я просто использую их все так:

<ul>
      {user.twitterUsername ? 
        <li>
          <LabelComponents.TwitterHandle />
          <a href={"http://twitter.com/" + user.twitterUsername}>@{user.twitterUsername}</a>
        </li> : null }

      {user.services.fbProfileLink ? 
        <li> 
          <LabelComponents.FacebookProfile />
          <a href={user.services.fbProfileLink}>FB Profile Link</a>
        </li> : null}

      {user.website ? 
        <li>
          <LabelComponents.Website />
          <a href={user.website}>{user.website}</a>
        </li> : null }

      <li>
        <LabelComponents.LinkedinID />
        <a href={user.linkedinId}>{user.linkedinId}</a>
      </li>

      <li>
        <LabelComponents.RollNo />
        {user.rollNoOrRegNo}
      </li>

      <li>
        <LabelComponents.Branch />
        {user.branch}
      </li>

      <li>
        <LabelComponents.GraduatingYear />
        {user.classOf}
      </li>

      <li>
        <LabelComponents.DegreeType />
        {user.levelOfDegree}
      </li>

      <li>
         <LabelComponents.CompanyOrUniversity />
        {user.currentUniCompOccu}
      </li>
    </ul>

Я все еще новичок в веб-разработке, разработке программного обеспечения, лучших практиках, реакции. Вы можете оставить предложения по улучшению этого небольшого компонента! Спасибо за чтение!

Впервые опубликовано в моем блоге: